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将加载到<div id="bHtml"></div>的{{1}}中。

由于某些原因，我无法将a.html添加到vue实例。

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

Answer 1

要符合Vuejs的标准，您需要在vuejs的方法中包含 selectCustomer 函数，并在需要更改的地方相应地调用该方法。而不是将selectCustomer作为单独的js函数。也可以直接在<div id="bHtml"></div>内的b.html上获取内容，并通过 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。

更新javascript中的vuejs列表项

1 个答案: