Мне было интересно, у меня есть этот код в моем блейд-файле:
<input type="text" class="form-control" :model="productname" id="name" name="name" aria-describedby="emailHelp" placeholder="Title" value="{{ old('name') }}" required>
и я хочу создать двухстороннюю привязку данных, поэтому, когда пользователь отправил 3 или более символов, чтобы получить зеленый фон этого поля ввода, а когда их меньше, - красный фон.
Я пытался сделать это с помощью vue-component, но, по какой-то причине, vue-component не имеет доступа к основному #app id, который назначается основному шаблону блэйда приложения, чтобы весь код vue имел доступ к HTML-код и изменить его. Я создал vue-компонент с именем Upload внутри ressources / assests / js / components / Upload.js, но когда я пишу этот код:
<template>
</template>
<script>
export default {
data() {
return {
productname: '',
};
},
mounted() {
console.log('Upload component', this.message);
}
}
</script>
и добавил, конечно, в app.js вот так Vue.component('upload-component', require('./components/Upload.vue'));
и запустите - npm run dev, чтобы скомпилировать код, который я получаю эту ошибку:
[Vue warn]: свойство или метод "productname" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. Смотри: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Независимо от того, когда я пишу этот код в основном файле app.js (resources / assests / js / app.js):
const app = new Vue({
el: '#app',
data() {
return {
productname: '',
};
},
});
все работает нормально, и я не получаю никаких ошибок, но я не хочу этого, так как представьте, что для моего веб-сайта / приложения у меня должно быть, например, 100 v-моделей, и я не хочу помещать их все в основное приложение. JS файл. Есть ли другой способ сделать это?
- Можно ли как-нибудь заставить его работать внутри компонента vue, чтобы компонент мог видеть v-модель и не выдавать мне эту ошибку?
Если нет, могу ли я заставить его работать и использовать vue внутри блейд-файла что-то подобное?
новое Vue ({
el: '#form',
данные: {
наименование товара: ''
}
});
но этот код не работает. Спасибо!