Question

我想在用户点击按钮时在其他组件中添加一个组件。但是我们如何在虚拟dom中渲染组件。我尝试使用v-html但它不起作用。什么是解决这个问题的最佳方法？

＆＃13;

export default {
    data(){
        return{
            elements : {
                hotel : '<hotel-form></hotel-form>'
            },
            

        }
    },
  methods:{
      addHotel(){
          
          console.log('add');
      }
  }
}

＆＃13;

<template>
  <div class="container" style="margin-top:300px;">
      <div class="row" id="mainform">
          <div v-for="item in elements">
              <div v-html="item"></div>
          </div>

      </div>
      <button @click="addHotel()">add hotel</button>
  </div>
</template>

＆＃13;

Answer 1

我会通过hotels将数组（<hotel-form>）绑定到v-for组件标记。这样，最初不会呈现hotel-form个组件，然后您可以将对象（包含要绑定到hotel-form组件的任何数据）推送到hotels数组，并且DOM将自动呈现新的相应hotel-form组件。

这是一个简单的例子：

Vue.component('hotel-form', {
  template: '#hotel-form',
  props: { id: Number, name: String },
});

new Vue({
  el: '#app',
  data() {
    return { hotels: [], count: 0 }
  },
  methods: {
    addHotel() {
      this.hotels.push({ name: 'foo', id: this.count++ })
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <div id="mainform">
    <hotel-form v-for="hotel in hotels" :key="hotel.id" v-bind="hotel">
    </hotel-form>
  </div>
  <button @click="addHotel">add hotel</button>
</div>

<template id="hotel-form">
  <div>
    <h4>Hotel Form #{{ id }}</h4>
    <div>{{ name }}</div>
  </div>
</template>

如何动态嵌套vue组件？

1 个答案: