[英]How to dynamically append HTML element to component in Vue.js
I'm new to vue.js, before this i'm using jquery or js for my project, i'm working on a project that require me to append HTML element dynamically on button click, and at the same time bind the input value to model, similar to:我是 vue.js 的新手,在此之前我在我的项目中使用 jquery 或 js,我正在开发一个项目,该项目需要我在单击按钮时动态附加 HTML 元素,同时绑定输入值建模,类似于:
$(".button").click(function() {
$("#target").append("<input type='hidden' name='data' v-model='inputModel' value='1'/>");
});
But i need this in Vue.js ways.但我需要 Vue.js 的方式。
Here is my code:这是我的代码:
data() {
return {
programmeBanner: [],
dropzoneOptions: {
...
...
init: function () {
this.on("success", function(file, response) {
file.previewElement.id = response;
// this is the part that i want to append the html input into
// the .dz-preview is the target that i want to append
$(".dz-preview[id='"+response+"']").append("<input type='hidden' name='"+fileInputName+"[]' v-model='programmeBanner' class='"+fileInputName+"' value='"+response+"'/>");
});
},
...
Here is a sample that i want to achieve, this is in Jquery, i need it in Vue.js这是我想要实现的示例,这是在 Jquery 中,我在 Vue.js 中需要它
https://jsfiddle.net/041xnfzu/ https://jsfiddle.net/041xnfzu/
Hmm I think you're mixing all kinds of code here :)嗯,我认为您在这里混合了各种代码:)
First off, you shouldn't use jquery inside VueJS.首先,你不应该在 VueJS 中使用 jquery。 I think that your setup is a little off.
我认为你的设置有点不对劲。 You shouldn't define a whole object with functions and event listeners in your vue data object.
你不应该在你的 vue 数据对象中定义一个带有函数和事件监听器的整个对象。
That's what Vue components are for, define methods in your methods property and data in you data property.这就是 Vue 组件的用途,在方法属性中定义方法,在数据属性中定义数据。
Thanks to your jsfiddle example, I have this pure vuejs example for you on codepen: https://codepen.io/bergur/pen/vwRJVx感谢您的 jsfiddle 示例,我在 codepen 上为您提供了这个纯 vuejs 示例: https ://codepen.io/bergur/pen/vwRJVx
VueJS code: VueJS 代码:
new Vue({
el: '#demo',
name: 'Adding html',
data() {
return {
inputs: []
}
},
methods: {
addInput() {
this.inputs.push(this.inputs.length+1)
}
},
computed: {
buttonText() {
return this.showInput ? 'Hide input' : 'Show input'
}
}
})
HTML template HTML 模板
<div id="demo">
<button @click="addInput">Add input</button>
<div v-for="(input, index) in inputs">
<input name="data" v-model="inputs[index]" />
</div>
<p>
First value: {{ inputs[0] }}<br />
Second value: {{ inputs[1] }}
</p>
</div>
Here's a walkthrough of the code.这是代码的演练。
You can try to change the input value and see that the template updates the value.您可以尝试更改输入值并查看模板是否更新了该值。
So input[0] holds the value for the first input, input[1] holds the value for the second input and so on.因此 input[0] 保存第一个输入的值, input[1] 保存第二个输入的值,依此类推。
If you want only one element to be appended to component, then you should use v-if
https://v2.vuejs.org/v2/guide/conditional.html#v-if如果您只想将一个元素附加到组件,那么您应该使用
v-if
https://v2.vuejs.org/v2/guide/conditional.html#v-if
If you want to append multiple elements, like todo list, you should use v-for
https://v2.vuejs.org/v2/guide/#Conditionals-and-Loops如果要附加多个元素,例如待办事项列表,则应使用
v-for
https://v2.vuejs.org/v2/guide/#Conditionals-and-Loops
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.