Question

使用 vuejs 和 Cordova ，我无法动态插入/创建新的 v-select 组件。
我的目标是在点击“添加”按钮时复制并插入现有 v-select 的副本。

我的网页代码是：

<v-select
    :items="exerciceList" 
    v-model="selectedExercice" 
    label="pick an exercise" 
    v-validate="'required'" 
    data-vv-name="select"
    required>
</v-select>
</div>
<div id="selectsContainer"></div>
<v-btn flat icon id="btn" v-on:click="newExercice()">

我的（不工作）点击事件监听器：

methods: {
    newExercice: function () {
      var container = document.getElementById('selectsContainer');
      var select = document.getElementById('exo');

      // select.items = this.exerciceList;
      select.removeAttribute('id');
      select.style.display = 'block';
      container.appendChild(select);
    }
  },

具有id expo代码的项目：

<v-select
  id="exo"
  style="display: none;"
  :items="exerciceList"
  v-model="selectedExercice"
  label="Choisissez un exercice"
  v-validate="'required'"
  data-vv-name="select"
  required>

感谢您帮助我改进实施。

Answer 1

Michael S所说的是正确的，你不想直接操纵DOM，导致许多问题。可能最好的解决方案（无论如何快速和简单）可能是导入额外的v-select组件，然后使用简单列表动态添加它，或者在这种情况下整数增加。

如果您想要更多地使用它进行自定义，您可以创建一个对象并动态添加和删除样式，attr等，这与此选项的工作方式相同，但将项目转换为数组对象然后在单击按钮时继续向其添加对象。

<v-select
    :items="exerciceList" 
    v-model="selectedExercice" 
    label="pick an exercise" 
    v-validate="'required'" 
    data-vv-name="select"
    required>
</v-select>
</div>
<div id="selectsContainer"
  v-for="(item, idx) in items">
    <v-select
    id="item.id" <!-- or use idx -->
    style="item.style" <!-- or use any string statement -->
    ...etc
    >
</div>
<v-btn flat icon id="btn" v-on:click="newExercice()">

...{
     components: [componentName],
     data: return {
       items: 0,
       ...
     }
     methods: {
       newExercice: ()=>{
         this.items++
       }
     }
...}

使用VueJs，Cordava和Javascript进行动态组件插入

1 个答案: