Vue.js: передача реквизита данным для использования в v-модели
Я пытался передать реквизиты таким данным, как я видел в другом сообщении:
Дочерний компонент:
props: {
idInput: { type: String, required: false },
nameInput: { type: String, required: false },
},
data() {
return {
id: this.idInput,
name: this.nameInput,
}
}
Так что я могу использовать его здесь:
<t-input v-model = "name" type = "text" />
Родительский компонент:
data() { return { game: {} } },
beforeCreated() { this.game = { name: "myName", id: "myID" }
<ChildComponent :name-input = "game.name" :id-input = "game.id" />
Проблема в том, что «имя» кажется неопределенным, в то время как если я сделаю то же самое, но изменю «имя» на «nameInput», это сработает, но я получаю ошибку Vue, говорящую мне не использовать такие реквизиты. Есть идеи?
Сделал это, но та же ошибка, на этот раз вместо undefined это пустая строка.
Какое сообщение об ошибке вы получаете?
> Избегайте прямого изменения реквизита, так как значение будет перезаписано при каждом повторном рендеринге родительского компонента. Вместо этого используйте данные или вычисляемое свойство на основе значения реквизита. Проп мутируется: "nameInput"
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот функциональный пример, который я создал, чтобы продемонстрировать этот случай:
const comp = Vue.component('comp', {
template: '#myComp',
props: {
idInput: { type: String, required: false },
nameInput: { type: String, required: false },
},
data() {
return {
id: this.idInput,
name: this.nameInput,
}
}
});
new Vue({
el: "#myApp",
data () {
return {
game: {}
}
},
created() {
this.game = { name: 'myName', id: 'myID' };
},
components: { comp }
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id = "myApp">
<comp :name-input = "game.name" :id-input = "game.id" />
{{game}}
</div>
<template id = "myComp">
<div>
{{idInput}}
<br>
<input v-model = "name" type = "text" />
</div>
</template>Обновлено:
После проверки кода я думаю, что проблема в том, что вы устанавливаете атрибут game в data родительского компонента на beforeCreated. Вместо этого установите его на created.
РЕДАКТИРОВАТЬ
ОП нашел другой способ сделать это. Вместо того, чтобы передавать реквизиты один за другим, передайте только 1 реквизит с объектом и используйте его атрибуты в v-model.
Эй, спасибо, что уделили время! К сожалению, у меня почти то же самое, и я до сих пор не могу найти, где ошибка. В любом случае будем стараться, еще раз спасибо.
@DavidDíaz, поделившись ссылкой на скрипку, другим будет проще отлаживать ваш код
Хотелось бы, но я использую некоторые библиотеки и API и не знаю, как это воспроизвести.
@DavidDíaz сравните этот код с вашим. Также нельзя использовать реквизит для v-model, используйте data
Это код, пытался добавить только актуальную информацию. И да, я пытаюсь использовать данные вместо реквизита, но значение данных кажется пустым. gist.github.com/dd8888/d3461474eac1f8a6d8a6ee5c3b2ef77c
@DavidDíaz, проблема в том, что вы пытаетесь изменить data в родительском компоненте на beforeCreated, что невозможно, вместо этого установите его на created. Я обновил ответ.
Найден способ сделать это! Вместо того, чтобы передавать реквизиты один за другим, если я передам только 1 реквизит с объектом и использую его атрибуты в v-модели, и это сработает. Большое спасибо за помощь
Пожалуйста. Не стесняйтесь принимать ответ как решение или редактировать его с вашими окончательными выводами. Это поможет будущим посетителям с такой проблемой.
На момент рендеринга
nameInput, вероятно, еще не определено. Попробуйте использовать значение по умолчанию для этого реквизита.