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

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 = "" 它在表格树中添加标签而不是渲染组件

cell1.appendChild(document.createElement('Ingmenu'));和上面的一样

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

正如我上面所说，组件已正确初始化，只要它可以访问成分属性，它就可以在任何页面上工作。

我花了将近一天的时间试图独自解决这个问题。

有人知道解决办法吗？感谢您的关注

Answer 1

Vue 的全部意义在于允许您的“视图”（如果您愿意，可以使用 DOM 或 HTML）作为数据的表示。

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

相反，以您期望基于某些数据结构布局的方式编写您的模板。在这种情况下，您正在添加“行”。 what 的行我不知道，但某处应该有 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>