在 javascript 中更新 vuejs 列表项答案

【问题标题】：update vuejs list item in javascript在 javascript 中更新 vuejs 列表项
【发布时间】：2019-09-13 09:38:53
【问题描述】：

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 将加载到<div id="bHtml"></div> 的a.html。

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

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

为了符合 Vuejs 的标准，您需要在 vuejs 的 methods 中包含 selectCustomer 函数，并在需要更改的地方相应地调用该方法。而不是将 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。

【讨论】：