I am new to vue and what I'm trying to do is create an date input mask with this jquery plugin: jQuery-Mask-Plugin
I created a vue component like this:
<template>
<input type="text" name="" class="form-control date">
</template>
<script>
require('./../jquery.mask.min.js');
export default {
mounted: function () {
$('.date').mask('00/00/0000');
console.log('name ' + this.input-name);
},
props: ['input-name']
}
</script>
I also tried:
props: ['input_name']
In another component and in a blade file I am calling it like this:
<date-input :input-name="delivery_date"></date-input>
When I run it in the browser I get this error:
[Vue warn]: Property or method "delivery_date" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in )
Why do I get this error?
The console.log gives me undefined.
Also, how do I put the value I send (delivery_date) into the input name in the template?
I tried:
<input type="text" name="{{ input-name }}" class="form-control date">
But that broke npm run dev.
Related
Please see my App.vue file inside src directory of vuejs application created using vue create my-app. This raises error in my localhost:8080 served using npm run serve:
App.vue
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
onInput(e) {
this.text = e.target.value
}
}
}
</script>
<template>
<input :value="text" #input="onInput" placeholder="Type here">
<p>{{ text }}</p>
</template>
I get the following errors in my webpage and console:
Compiled with problems:X
ERROR in ./src/App.vue?vue&type=template&id=7ba5bd90& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/#vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/#vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&)
Module Error (from ./node_modules/#vue/vue-loader-v15/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
Errors compiling template:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
1 |
2 | <input :value="text" #input="onInput" placeholder="Type here">
|
3 | <p>{{ text }}</p>
| ^^^^^^^^^^^^^^^^^
4 |
ERROR
[eslint]
/home/cdit/my-app/src/App.vue
18:3 error The template root requires exactly one element vue/no-multiple-template-root
✖ 1 problem (1 error, 0 warnings)
how can I fix this error? . The code is pasted from a tutorial.
I think inside the template tag ,there must only be one shared parent. So ideally this should work. Please give it a try.
<template>
<div>
<input :value="text" #input="onInput" placeholder="Type here">
<p>{{ text }}</p>
</div>
</template>
I want to embed a checkbox inside a Vue3 Component and have the v-model binding passed down to the checkbox.
Inside the Component:
<!-- Tile.vue -->
<template>
<div>
<input type=checkbox v-model="$attrs">
</div>
</template>
<script>
export default {inheritAttrs: false}
</script>
Then in an outside file:
<template>
<Tile value="carrot" v-model="foods" />
<Tile value="tomatoes" v-model="foods" />
</template>
<script setup>
var foods = ref([]);
</script>
How do I achieve this?
The documentation says that v-model is just a shorthand for :modelValue and #update:modelValue but this is not universal as Vue obviously behaves differently for form elements such as smartly listening to onchange instead of oninput and modifying the property checked instead of value depending on the node.
If I use v-model on the outer component, how do I forward it to the checkbox and get the same smart behavior that Vue has?
I have found tons of controversial information. Some recommend using #input event (Vue 3 custom checkbox component with v-model and array of items). Some recommend emitting modelValue:update instead of update:modelValue (https://github.com/vuejs/core/issues/2667#issuecomment-732886315). Etc.. Following worked for me after hour of trial and error on latest Vuejs3
Child
<template>
<div class="form-check noselect">
<input class="form-check-input" type="checkbox" :id="id" :checked="modelValue" #change="$emit('update:modelValue', $event.target.checked)" />
<label class="form-check-label" :for="id"><slot /></label>
</div>
</template>
<script>
import { v4 as uuidv4 } from "uuid";
export default {
inheritAttrs: false,
emits: ["update:modelValue"],
props: {
modelValue: {
type: Boolean,
required: true,
},
},
setup() {
return {
id: uuidv4(),
};
},
};
</script>
Parent:
<Checkbox v-model="someVariable">Is true?</Checkbox>
you can verify that it works but doing this in parent:
var someVariable= ref(false);
watch(someVariable, () => {
console.log(someVariable.value);
});
p.s. The other solution above does not work for me. Author recommends using value property. But in example he passes v-model attribute. So I don't know exactly how it's supposed to work.
You can achieve the behavior by using emits to keep data in sync and behave as default v-model behavior. Checkbox component:
<template>
<div>
<input
type="checkbox"
:checked="value"
#change="$emit('input', $event.target.checked)"
/>
{{ text }}
</div>
</template>
<script>
export default {
name: "inputcheckbox",
props: ["value", "text"],
};
</script>
And in the parent component you can have as many checkboxes you want.
<template>
<div id="app">
<maincontent :showContent="showContent" />
<inputcheckbox text="one" v-model="checkedOne" />
<inputcheckbox text="two" v-model="checkedTwo" />
</div>
</template>
Here is a vue 2 example but is applicable to vue 3 as well. Hope this was helpful. Sandbox with this behavior:
https://codesandbox.io/embed/confident-buck-kith5?fontsize=14&hidenavigation=1&theme=dark
i am stuck, i am new to vue and vuex and when i run the below code it got me this error. I have searched some of the other questions here but i can't find a solution
[Vue warn]: Computed property "vat" was assigned to but it has no setter.
found in
---> <BusinessList>
<App> at src/App.vue
<Root>
Can someone help me?
-> Below are the files with the code
BusinessList.vue
<script>
// import BusinessDataService from "../services/BusinessDataService";
import { mapGetters, mapActions } from "vuex";
export default {
name: "BusinessList",
methods: {
...mapActions(["fetchBusinesses", "searchBusiness"])
},
computed: mapGetters(["allBusinesses", "vat"]),
created(){
this.fetchBusinesses();
},
mounted() {
this.searchBusiness(this.vat);
}
};
</script>
<template>
<!-- SEARCH FORM -->
<div class="input-group input-group-md">
<input
class="form-control form-control-navbar"
type="search"
placeholder="Search by Vat"
aria-label="Search"
v-model="vat"
/>
<div class="input-group-append">
<button class="btn btn-outline-danger"
type="submit"
#click="searchBusiness"
>
<i class="fas fa-search"></i>
</button>
</div>
</div>
</template>
In vue computed are set to be a getter by default, it means that if you want to set a value to a computed you should define a setter in that computed. here is the vue documentation to read more about this topic:
computed setter vue documentation
now you have set the computed 'vat' from vuex store and used it as a v-model in your template. it means that whenever input data changes, vue tries to assign a value to a computed which has no setter and hence you are getting this error. you should set v-model to a variable in your data and refactor your code to reflect this change.
I just tried to make a single login form in Vue but it returns
[Vue warn]: Failed to resolve component: v-text-field
and
[Vue warn]: Failed to resolve component: v-form
the code in login component:
<template lang="html">
<div>
<v-form>
<v-text-field v-model="loginInfo.username" label="Username"/>
<v-text-field v-model="loginInfo.password" label="Password"/>
<v-btn>Login</v-btn>
</v-form>
</div>
</template>
<script>
export default {
data() {
return{
loginInfo: {
username:'',
password:'',
}
}
},
}
</script>
I got the same issue and put around 2 hours to figure out. The only problem with me was my browser was getting the cached js file that did not have my required component.
I see two options to answer the question:
Either you use Vuetify.js as you are trying to in the code provided above. I would recommend checking if you are using Vuetify.js correctly by following the quick start guide.
The other option would be not to use Vuetify.js and therefor use the regular HTML expressions in the form:
<div>
<form>
<label for="username">Username</label>
<input id="username" type="text" v-model="loginInfo.username"/>
<label for="password">Password</Label>
<input id="password" type="password" v-model="loginInfo.password"/>
<input type="submit"value="Login" />
</form>
</div>
Vue.js component is like below.
<template>
<div class="container">
<input type="text" name="first_name" v-validate data-vv-rules="min:12">
</div>
</template>
<script>
export default {
props: ['messages']
}
</script>
In the above component, messages property is an object with one property with value like this:
this.messages.Min_Length_First_Name: 3
I am trying to assign it like below.
<input type="text"
name="first_name"
v-validate
data-vv-rules="min:this.messages.Min_Length_First_Name">
But, the input tag renders the min value = this.messages.Min_Length_First_Name instead of numeric value
Am I missing anything?
You should not use this in the template. It's automatically inferred
:data-vv-rules="`required|alpha|min:${messages.Min_Length_First_Name}|max:15`