Question

我正在尝试添加一个组件（从数据库中获取选项的下拉列表）...

export default {
  name: 'IngMenu',
  props:['ingredients'],
  data () {
    return {
      selected: '',
    }
  },
  render: function(createElement){
    return createElement('select', 
      this.$props.ingredients.map(function(ing){
        return createElement('option', ing.name)
      })
    )

  }
}

进入使用按钮生成的单元格/行

<button class="btn" id="add" v-on:click="addRow">Add Ingredient</button>

这里的方法......

methods: {
    addRow: function(){
        let table = document.getElementById("tab");
        let row = table.insertRow();
        let cell1 = row.insertCell(0);
        let cell2 = row.insertCell(1);
        let cell3 = row.insertCell(2);
        let cell4 = row.insertCell(3);
        let cell5 = row.insertCell(4);
        cell1.appendChild(document.createElement('Ingmenu')); //ERROR
        cell2.innerHTML = "NEW CELL2";
        cell3.innerHTML = "NEW CELL2";
        cell4.innerHTML = "NEW CELL2";
        cell5.innerHTML = "NEW CELL2";

}

} }

如果我将它添加到页面顶部但是我无法在单元格内插入，该组件可以正常工作。

到目前为止我尝试了什么：

cell1.innerHtml =＆＃34;＆＃34; 它在表树中添加标记而不是渲染组件

cell1.appendChild（document.createElement（＆＃39; Ingmenu＆＃39;））; 它与上面相同

cell1.innerText 显然它将标记显示为文本

正如我上面所说，组件已经正确初始化并且可以在任何页面上工作，只要它可以访问成分道具。

我每天都想失去almoast，试图独自解决它。

有谁知道解决方案？感谢您的兴趣

Answer 1

Vue的全部内容是允许您的“视图”（如果您愿意，可以使用DOM或HTML）代表您的数据。

Vue中几乎没有理由让您使用getElementById或appendChild直接操作DOM。

相反，请根据某些数据结构以您希望布局的方式编写模板。在这种情况下，您要添加“行”。什么的行我不知道，但某处应该有一些的东西。如果要在表中添加一行，只需在集合中添加一个新的 thing ，Vue就会将其添加到DOM中。

这是一个例子。

console.clear()

const IngMenu = {
  name: 'IngMenu',
  props:['ingredients'],
  data () {
    return {
      selected: '',
    }
  },
  render: function(createElement){
    return createElement('select', 
      this.$props.ingredients.map(function(ing){
        return createElement('option', ing.name)
      })
    )

  }
}

new Vue({
  el: "#app",
  data:{
    rows:[],
    ingredients: [{name: "One"}, {name: "Two"}]
  },
  methods: {
    addRow(){
      // Push some real data object here that represents 
      // what each row "is"
      this.rows.push({})
    }
  },
  components: {IngMenu}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="row in rows">
      <td>
        <ing-menu :ingredients="ingredients"></ing-menu>
      </td>
      <td>NEW CELL2</td>
      <td>NEW CELL3</td>
      <td>NEW CELL4</td>
      <td>NEW CELL5</td>
    </tr>
  </table>
  <button class="btn" id="add" v-on:click="addRow">Add Ingredient</button>
</div>

Vue js如何将组件添加到表格中的单元格

1 个答案: