在同一元素 VueJS 中使用 V-model 和 Value答案

【问题标题】：Using V-model and Value in the Same Element VueJS在同一元素 VueJS 中使用 V-model 和 Value
【发布时间】：2020-01-13 09:28:22
【问题描述】：

我想在同一个输入中使用V-model 和Value。我想将Value 用作来自relationship Laravel 的Initial 值，并将V-model 用作输入。

谷歌搜索了几分钟后，我发现V-model 和Value 不能使用相同的输入。

但是有人告诉我，我可以在mounted 的某个地方指定一个初始值。我照他们说的做了。

       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>

有人可以帮忙吗？

【问题讨论】：

form 属性是否注册在组件数据中？或者它只是一个动态属性？
@Jerodev 是的，form 在数据中注册..

标签： laravel vue.js vuejs2

【解决方案1】：

Vue reactivity has some caveats，其中之一是无法检测到数组中的深层变化。因此，您应该使用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。

【讨论】：

不过，我没有看到 console.log 中发生任何事情
您的意思是您在控制台中看不到更改，或者您在控制台中看不到任何内容？
我的意思是在console.log(this.form.products)的console.log中看不到任何内容
我在created 中也有this.fetchProduct

【解决方案2】：

试试这个解决方案：

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>

【讨论】：

【解决方案3】：

您可以像这样设置quantity 值，但它不会被 vue 渲染，因为它无法检测到它。您可以查看here。因此，您可以尝试更改您的 for 循环，如下所示，并使用 this.$set 设置 quantity 值

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);
  }
}

【讨论】：

它对我有用。你能分享你的form对象结构吗？如果可能的话，可以更新完整的vue文件。
看看这位兄弟gist.github.com/N0SYS73M1SS4F3/37fa687c044952776c305452f4adc906
我认为问题在于，最初您在form 属性中的product 数组是空的，因此它无法在产品数组中找到任何东西以在created 挂钩中循环。因此，您的控制台中没有任何内容。