Estou estudando frameworks reativos para um projeto, e uma das funcionalidades que preciso é a criação de propriedades dinâmicas, em angularJs
bastava iniciar um ng-model
que a propriedade era criada, mas vejo que isso não é possível em Vue 2, Por que ? existe outra forma de fazer isso ou outro framework atual que permite isso?
2 Respostas
Para criar variáveis de dinâmicas, poderia fazer da seguinte maneira:
1 - Criar uma variáveis que receberá as variáveis dinâmicas
2 - Fazer um loop para exibi-las
3 - Utilizar this.$set e this.$delete para criar e removê-las
Segue um exemplo de código.
new Vue({
el: "#app",
data: function() {
return {
variaveis: {}
};
},
beforeMount: function() {
this.add();
},
methods: {
add: function() {
this.$set(this.variaveis, 'campo1', {
nome: 'Campo 01',
valor: 'Valor 01'
});
},
remover: function(key) {
this.$delete(this.variaveis, key)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
<p>É possível criar as propriedades dinamicamente com o vm.$set.</p>
<div>
<div v-for="(variavel, key) in variaveis">
<label>{{ variavel.nome }}</label>
<input v-model="variavel.valor" :placeholder="variavel.nome" type="text">
<button v-on:click="remover(key)">Remover</button>
</div>
</div>
<pre>{{ variaveis }}</pre>
<button v-if="Object.keys(variaveis).length == 0" v-on:click="add">Add</button>
</div>
Obs.: Fiz a utilização desta técnica para criar um page builder com Vue. A diferença é que tenho diversas tratativas e na criação de cada elemento eu digo o tipo em uma propriedade.
-
Opa, realmente $set e $delete serão perfeitos para o meu caso, obrigado Bruno! 23/10/2017 às 17:43
Em Vue como referiste ele obriga a instanciar a propriedade vazia em data
.
Uma solução é criar uma referência ao elemento criado no template com ref
. Assim no template podes ter ref="nome"
e depois podes usar this.$refs.nome.style.color = 'blue';
Isto pode ser util em casos de posicionamento por exemplo mas deve ser evitado para inserir HTML para evitar possíveis ataques.
v-model
, não é semelhante aong-model
? Podes explicar melhor a funcionalidade que procuras?v-model
ele me obriga a instanciar a propriedade vazia emdata{}
, teria como instanciarv-model
e ele criar a propriedade caso não exista, como emangularjs
? (meus testes foram online caso esteja falando besteira)data
. Podes explicar o que estás a fazer, talvez haja uma maneira "à lá Vue" de fazer isso...ref
?