Question

这是我的代码，这只是一个示例代码，如果以下工作，那么这将帮助我构建我正在处理的其他内容。

{{1}}

我不想分散您对实际问题的回答，但如果您对我正在工作的内容感到好奇，请检查this :)这里我试图在行结尾添加新的子DIV单击任何行项目。

如果将this转换为vue而不是上面提到的实际问题，我将非常高兴，因为如果你发现它很难，请不要分心于实际问题：）

Answer 1

我在forum.vuejs.org得到了JamesThomson的帮助，虽然解决方案没有解决我的问题，但我明白了使用Vue.js的局限性或可能性。

詹姆斯·汤姆森说：

是的，您的示例代码肯定不起作用。使用Vue时   你需要以面向数据的方式思考，而不是面向DOM（如   jQuery的）

取自您的SO帖子：

这里我试图在行的末尾添加新的子DIV   点击了行项目。

我认为这是本主题的最终目标。一个简单的例子   这可以这样实现：   https://codepen.io/getreworked/pen/XZOgbm?editors=1010

＆＃13;

let Welcome = {
  template: `
    <p @click="toggleMsg()">Welcome {{ msg }}!</p>
  `,
  
  data () {
    return {
      msg: 'home'
    }
  },
  
  methods: {
    toggleMsg () {
      return this.msg = this.msg === 'home' ? 'back' : 'home'; 
    }
  }
}

const App = new Vue({
  el: '#app',
  
  data: {
    children: [
      Welcome
    ]
  },
  
  methods: {
    add () {
      this.children.push(Welcome);
    },
  }
});

＆＃13;

<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <template v-for="(child, index) in children">
      <component :is="child" :key="child.name"></component>
  </template>
  
  <button @click="add()">Add Another</button>
</div>

＆＃13;

或者您可以使用渲染功能以获得更大的灵活性 https://jsfiddle.net/jamesbrndwgn/ku7m1dp0/9/

＆＃13;

const Reusable = {
  template: '<div>{{ name }} {{ bar }}</div>',
  
  props: {
    name: {
      type: String
    }
  },
  
  data () {
    return {
      bar: 'Bar'
    }
  }
}

const App = new Vue({
  el: '#app',
  
  data: {
    items: []
  },
  
  methods: {
    addComponent () {
      const renderComponent = {
        render (h) {         
          return h(Reusable, {
            class: ['foo'],
            
            props: { 
              name: 'Foo'
            }
          })
        }
      }
      
      this.items.push(renderComponent)      
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">

<div id="app">
  <component v-for="item in items" ref="itemRefs" :is="item" :key="item.name"></component>
  
  <button @click="addComponent">Add Component</button>
</div>

＆＃13;

我找到了其他一种与上述方法相同的方法，但只使用旧的vue.js-1而不是vue.js-2：

＆＃13;

var createNewBox = function() {
	var MyPartial = Vue.extend({});
  window.partial = new MyPartial({
    template: '#partial',
    data: function() {
      return {
        txt: 'This is partial'
      }
    },
    methods: {
    	print: function() {
        console.log('this.txt : ' + this.txt)
        console.log('main.txt : ' + main.txt)
      },
    },
  })
  window.partial.$mount().$appendTo('body')
}

window.main = new Vue({
  el: '#main',
  data: function() {
  	return {
    	txt: 'This is main'
    }
  },
  methods: {
  	show: function() {
    	createNewBox()
    }
  },
})

＆＃13;

<script src="https://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>

<div @click="show" style="width:200px;height:200px;background:#000" id="main">
  <template id="partial">
    <div style="width:100px;height:100px;background:#ff0" @click.stop="print"></div>
  </template>
</div>

＆＃13;

Answer 2

this已转换为Vue。

https://codepen.io/jacobgoh101/pen/Kojpve

<div id="app">
  <div class="parent">
    <div class="child" @click="handleChildClick" data-new-child-id="1">1234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="2">12341234 </div>

    <div class="child" @click="handleChildClick" data-new-child-id="3">123412341234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="4">1234</div>

    <div class="new-child" v-if="[1,2,3,4].indexOf(showNewChild) > -1">boom</div>

    <div class="child" @click="handleChildClick" data-new-child-id="5">12341234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="6">123412341234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="7">1234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="8">12341234</div>

    <div class="new-child" v-if="[5,6,7,8].indexOf(showNewChild) > -1">boom</div>

    <div class="child" @click="handleChildClick" data-new-child-id="9">123412341234</div>

    <div class="new-child" v-if="[9].indexOf(showNewChild) > -1">boom</div>
  </div>
</div>

的Javascript

new Vue({
  el: '#app',
  data: {
    showNewChild:null
  },
  methods: {
    handleChildClick(e) {
      let id = e.target.dataset.newChildId;
      id = Number(id);
      this.showNewChild = id;
    }
  }
})

如何动态地（以编程方式或动态）添加或删除Vue.js组件

2 个答案: