ボタンプレスにコンポーネントを追加することはできますか？ここ

Question

は私が解決したい問題です： 私が押されたときにDOMに私成分を追加する必要があり、そのボタンを持っています。それが2回押された場合 2つの<p>のTEGがなければなりません。どうすればこれを達成できますか？

JS：

<script> 

    Vue.component('my-component', { 
    template: "<p>hello</p>", 
    }) 

    var vue = new Vue({ 
    el: "#App", 
    data: {}, 
    methods: { 
     append: function() { 
     // unknown code here 
     } 
    } 
    }) 
</script> 

HTML：ここ

<div id = "App"> 
    <button @click="append" class="btn btn-primary">Spawn stuff!</button> 
</div> 

Answer 1

は、あなたがそれを行うことが一つの方法です。このコードは、v-for〜iterate over a rangeを使用してカウンタを反復処理します。

Vue.component('my-component', { 
 
    template: "<p>hello</p>", 
 
}) 
 

 
var vue = new Vue({ 
 
    el: "#App", 
 
    data: { 
 
    hellocount: 0 
 
    }, 
 
    methods: { 
 
    append: function() { 
 
     // unknown code here 
 
     this.hellocount++ 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="App"> 
 
    <my-component v-for="n in hellocount" :key="n"></my-component> 
 

 
    <button @click="append" class="btn btn-primary">Spawn stuff!</button> 
 
</div>

これは少し非定型です。 @RoyJがあなたのコメントで示唆するように、通常は実際のデータからレンダリングされたコンポーネントを駆動します。

以下のコメントから、あなたはこのような形式のものを構築することができます。

Vue.component('my-input', { 
 
    props:["value", "name"], 
 
    data(){ 
 
    return { 
 
     internalValue: this.value 
 
    } 
 
    }, 
 
    methods:{ 
 
    onInput(){ 
 
     this.$emit('input', this.internalValue) 
 
    } 
 
    }, 
 
    template: ` 
 
    <div> 
 
     {{name}}:<input type="text" v-model="internalValue" @input="onInput"> 
 
    </div> 
 
    `, 
 
}) 
 

 
var vue = new Vue({ 
 
    el: "#App", 
 
    data: { 
 
    form:{ 
 
     name: null, 
 
     email: null, 
 
     phone: null 
 
    } 
 
    }, 
 
    methods:{ 
 
    append(){ 
 
     const el = prompt("What is the name of the new element?") 
 
     this.$set(this.form, el, null) 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="App"> 
 
    <my-input v-for="(value, prop) in form" 
 
      :key="prop" 
 
      v-model="form[prop]" 
 
      :name="prop"> 
 
    </my-input> 
 
    
 
    <button @click="append">Add New Form Element</button> 
 
    <div> 
 
    Form Values: {{form}} 
 
    </div> 
 
</div>

コードは、各プロパティの入力をレンダリングするために、フォームの特性上、フォームオブジェクトと反復を定義します。

これは、明らかに非常にナイーブであるのみ入力テキストなどを扱うしかし、うまくいけばあなたのアイデアを得ます。通常、アレイに新しいアイテムをプッシュする、構成要素としてレンダリングされるデータの配列を有することにより