#javascript #vue.js #vuejs2 #vue-component
#javascript #vue.js #vuejs2 #vue-компонент
Вопрос:
Мой VueJS и HTML-код ниже:
Я получаю сообщение об ошибке:
[Предупреждение Vue]: свойство или метод «tempdt» не определены в экземпляре, но на них ссылаются во время визуализации. Убедитесь, что это свойство является реактивным либо в параметре data, либо для компонентов на основе классов, путем инициализации свойства. См.: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .
Может кто-нибудь подсказать мне, какую ошибку я делаю, и как правильно ссылаться на данные из динамического компонента?
const Comp = {
template: '<div><select v-model="tempdt"><option>hi</option></select><input type="text" :value="[[tempdt]]" ></input></div>'
}
new Vue({
delimiters: ["[[", "]]"],
el: "#app",
data: {
tempdt: '',
components: [Comp]
},
methods: {
add() {
this.components.push(Comp)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" @click="add">Add Component</button>
<component v-for="(component, index) in components" :key="index" :is="component" />
</div>
Ответ №1:
Определите компонент, используя Vue.component
его имя в качестве первого параметра, затем переместите это свойство в этот компонент.
Vue.component('my-comp', {
data() {
return {
tempdt: '',
}
},
template: '<div><select v-model="tempdt"><option>hi</option></select><input type="text" :value="[[tempdt]]" ></input></div>'
})
new Vue({
delimiters: ["[[", "]]"],
el: "#app",
data: {
components: ["my-comp"]
},
methods: {
add() {
this.components.push(Comp)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" @click="add">Add Component</button>
<component v-for="(component, index) in components" :key="index" :is="component" />
</div>