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

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

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>

} }

如果我将该组件添加到页面顶部，但无法将其插入单元格中，则该组件工作正常

到目前为止我所尝试的：

cell1.innerHtml=它在表树中添加标记，而不是呈现组件

cell1.appendChilddocument.createElement'Ingmenu'；它的作用与上面相同

cell1.innerText明显地将标记显示为文本

正如我上面所说的，该组件已经正确初始化，只要它能够访问Components属性，就可以在任何页面上工作

我已经失去了一天的almoast试图独自解决它

---

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

如果您想表示您的数据，Vue的整个要点就是允许您查看DOM或HTML

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

相反，按照您期望的方式编写模板，该方式基于某些数据结构进行布局。在本例中，您正在添加行。一排排我不知道的东西，但某处应该有一堆东西。当您想向表中添加一行时，只需向集合中添加一个新内容，Vue就会负责将其添加到DOM中

这里有一个例子

控制台。清除 常数菜单={ 名称：“IngMenu”， 道具：[“配料”]， 资料{ 返回{ 选定：， } }, render:functioncreateElement{ 返回createElement'select'， 这是$props.INCOMENTS.MAP{ 返回createElement'option'，ing.name } } } 新Vue{ el:应用程序， 数据：{ 行：[]， 成分：[{name:One}，{name:Two}] }, 方法：{ 阿德罗{ //将一些真实的数据对象推到这里，表示 //每行是什么 this.rows.push{} } }, 组件：{IngMenu} } 新单元2 新单元3 新单元4 新单元5 添加成分

---

为什么？您是否正在使用DOM操纵来创建Vue组件？让Vue渲染表格。我不确定我是否理解你的意思。您是指Vue网格组件吗？非常感谢你们，你们的代码运行得非常好，我需要创建一个行组件，因为这是更大的应用程序的一部分。我唯一不太明白的一个想法是当你把一个空对象推到rows数组中，然后创建一个新行。我确实理解v-for部分，是如何从addRow中删除的，我不理解。你能解释一下吗？谢谢again@FraPetIm同样，这要追溯到表是事物集合的表示这一事实。在上面的答案中，该集合称为行。我不知道你想在桌子上展示什么，但你有一些东西。出于示例的考虑，我将该对象集合设置为空对象的集合。v-for=行中的行仅显示行集合中的每一行。每次单击该按钮时，都会向集合中添加一个新的空对象，因此您将获得一个新行。在一个典型的应用程序中，当您单击addRow时，您会添加一个东西。

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";

}