Использование V-модели и значения в одном элементе VueJS - PullRequest
Новая
       3

Использование V-модели и значения в одном элементе VueJS

0 голосов
/ 13 января 2020

Я хочу использовать V-model и Value в одном входе. Я хочу использовать Value для Initial Значение от relationship Laravel и V-model для ввода.

После нескольких минут поиска в Google я обнаружил, что V-model и Value не могут использовать один и тот же вход.

enter image description here

Но кто-то сказал мне, что я могу присвоить начальное значение где-то в смонтированном. Я сделал, как они сказали. 

       created() {

            for (let i in this.form.products) {
                this.form.products[i].quantity = this.form.products[i].pivot.quantity; 
                console.log(this.form.products);
            }
        },

Но это все равно не помогло.

в Моей Vuejs

    <table>   
       <tr class="tablePurchase--td"  v-for="(item, index) in form.products" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.code}}</td>
            <td>
                <input
                    type="number"
                    class="table-quantity"
                    v-model="form.products[index].pivot.quantity"
                />
            </td>
            <td>
                <input
                    type="number"
                    class="table-quantity"
                    v-model="form.products[index].pivot.unit_price"
                    placeholder="0.00"
                />
            </td>
        </tr>
    </table>

Может кто-нибудь помочь, пожалуйста?

Ответы [ 3 ]

0 голосов
/ 13 января 2020

Попробуйте это решение: 

new Vue({
	el:"#app",
	data:{
		message:"Hello world!",
		form:{
			products:[
				{id:1, name:'product 1', code:'pcode-1', quantity:6,price:'$300'},
				{id:2, name:'product 2', code:'pcode-2', quantity:8,price:'$800'},
				{id:3, name:'product 3', code:'pcode-3', quantity:9,price:'$700'},
			]
		}
	},
	methods:{

	}
});
<html>
  <body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      <table>   
       <tr class="tablePurchase--td"  v-for="(item, index) in form.products" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.code}}</td>
            <td>
                <input
                    type="number"
                    class="table-quantity"
                    v-model="form.products[index].quantity"
                />
            </td>
            <td>
                <input
                    type="number"
                    class="table-quantity"
                    v-model="form.products[index].price"
                    placeholder="0.00"
                />
            </td>
        </tr>
    </table>
    </div>
  </body>
</html>
0 голосов
/ 16 января 2020

Вы можете установить значение quantity таким образом, но оно не будет обработано vue, поскольку оно не может его обнаружить. Вы можете проверить здесь . Таким образом, вы можете попробовать изменить значение для l oop, как показано ниже, и установить значение quantity с помощью this.$set

created() {
  // looping on form.products ARRAY
  for (let i = 0; i < this.form.products.length; i++) {
    this.$set(this.form.products[i], 'quantity', this.form.products[i].pivot.quantity) 
    console.log(this.form.products);
  }
}
.
0 голосов
/ 13 января 2020

Vue реактивность имеет некоторые предостережения , одним из которых является то, что невозможно обнаружить глубокие изменения в массиве. Из-за этого вы должны использовать Vue.set() для обновления глубоких свойств объекта.

Так что в вашем случае вы должны сделать что-то вроде этого: 

for (let i in this.form.products) {
    Vue.set(this.form.products[i]), 'quantity', this.form.products[i].pivot.quantity); 
    console.log(this.form.products);
}

Это обеспечит Vue обнаруживает изменения и обновляет DOM соответственно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...