时间戳

首页 > 解决方案 > 在 javascript 中更新 vuejs 列表项

javascript - 在 javascript 中更新 vuejs 列表项

问题描述

Vue.js 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模型的列表项呢？

标签： javascriptvue.jsvuejs2

解决方案

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

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。

推荐阅读