Dynamic properties in Vue 2

Asked

Viewed 160 times

2

I’m studying reactive frameworks for a project, and one of the features I need is the creation of dynamic properties, in angularJs just start a ng-model that the property was created, but I see that this is not possible in Vue 2, why ? there is another way to do this or another current framework that allows this?

vue.js

  • The Vue has the v-model, is not similar to ng-model? You can better explain the functionality you are looking for?

  • @Sergio, when I start one v-model it forces me to instantiate the empty property in data{}, would be able to instantiate v-model and he create the property if it does not exist, as in angularjs? (my tests went online if you’re talking nonsense)

  • In fact you must have stated in data. You can explain what you’re doing, maybe there’s a way "there Vue" to do this...

  • Let’s say I’m creating an element dynamically, like a div, by creating this div I’d like to reference it as property, so that I can move things like style, but individually.

  • 1

    You can do that with ref?

  • I didn’t know the ref, I believe it fits my problem, would have to give me an example of use?

  • https://jsfiddle.net/Sergio_fiddle/50wL7mdz/71248/

  • This solves a lot of my problems, thank you! if I wanted to answer...

Show 3 more comments

2 answers

2


To create dynamic variables, you could do it this way:

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

Follow an example of code.

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>

Note: I used this technique to create a page with Vue. The difference is that I have several deals and in the creation of each element I say the type in a property.

  • Oops, really $set and $delete will be perfect for my case, thank you Bruno!

1

In Vue as you mentioned it forces you to instantiate the empty property in data.

One solution is to create a reference to the element created in the template with ref. So in the template you can have ref="nome" and then you can use this.$refs.nome.style.color = 'blue';

This can be useful in case of positioning for example but should be avoided to insert HTML to avoid possible attacks.

Example: https://jsfiddle.net/Sergio_fiddle/50wL7mdz/71248/

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.