在 JavaScript 中更新 Vuejs 列表项

Question

vuejs 2.x.

我有a.html，看起来像：

<div class="form-group col-md-4" v-for="ec in eb.ecustomerList">
<label >{{ec.customerTypeName}}</label>
<div class="form-inline">
<input type="text" class="form-control customerSearchInput" v-bind:id="ec.customerTypeName"
style="width: 20%">&nbsp;&nbsp; 
<i class="fas fa-search fa-lg customerSearchIcon" style="color: blue" ></i>
<input type="hidden" v-bind:id="ec.customerTypeName+'Id'" v-model="ec.customerId"  />
<input type="hidden" v-model="ec.customerType" value="3" />
</div>
<textarea id="shipperText" v-model="ec.customerDetail"></textarea>
</div>
<div id="bHtml"></div>

v-model="ec.customerId"必须设置为b.html

function selectCustomer(id, item) {
$("#"+id).val(item.name);
$("#"+id+"Id").val(item.id);
$("#"+id+"Text").val(item.otherName);
//need to update value of v-model="ec.customerId" here
}

并且b.html将加载到a.html的<div id="bHtml"></div>.

由于某些原因，我无法将selectCustomer(id, item)添加到 vue 实例。

那么在这种情况下，如何在 js 函数中更新 vue 模型的列表项呢？

Answer 1

为了符合 Vuejs 的标准，你需要在 vuejs的方法中包含selectCustomer函数，并在需要更改它的地方相应地调用该方法。而不是将选择客户作为单独的 js 函数。还可以将 b.html 上的内容直接放在<div id="bHtml"></div>内，并通过selectCustomer方法更改值。这样

template:
`<div class="form-group col-md-4" v-for="ec in eb.ecustomerList"> 
// rest of the html 
</div> 
<div id="bHtml">  
<div> selected name {{item.name}}</div>  
<div> selected id {{item.id}}</div>  
<div> selected text {{item.otherName}}</div>   
</div>`,
data: function(){  
return{    
item:{name:'', id:'', otherName:''}  
}
}, 
methods:{  
selectCustomer: function(id, item, vModel) {
$("#"+id).val(item.name);
$("#"+id+"Id").val(item.id);
$("#"+id+"Text").val(item.otherName);
//update the vmodel as required
vModel = newValue;
} 
}

你需要了解 Vuejs 会根据反应式数据更改方法更改您的应用程序。而不是使用 jQuery 来操作 html DOM。