Как правильно сделать привязку данных к динамически созданному элементу в Vue?

Question

[Онотолий]

Здравствуйте, начал изучать vue, сталкнулся с проблемой что я не понимаю как изменить содержимое динамически созданного html элемента , или как к этому элементу сделать привязку данных.

<script>
export default {
  data() {
    return {
      fghg: '',
      hk: '',
    }
  },
  methods: {
    _jjj(){
      this.fghg = '<b v-bind:data="hk">jjj!!!!</b>',  // этот элемент  создается динамически. Вот как сделать чтобы потом я мог менять значения его атрибута "data" и менять содержимое при нажатии на кнопку "12" внизу в коде смотрите?
      this.hk = '!21121!'
    },
   _kkk(){
      // ... ??? ...
    }
  }
}
</script>

<template>
  <div v-html="fghg"></div>
  <button @click="_jjj">11</button>
  <button @click="_kkk">12</button>
</template>

В коде выше я написал комментарий. который поясняет суть проблемы. С jquery было все проще конечно, вот как это делается на jquery если кому интересно:

function _jjj(){
      $('.fghg').html('<b class="aaakjhij" data="hk">jjj!!!!</b>');
    }
   function _kkk(){
      var elem = $('.aaakjhij');
      elem.html('ha-ha-haaaa!!!');
      elem.attr('data', 'ooooooooooo');
    }

<div class="fghg"></div>
  <button onclick="_jjj()">11</button>
  <button onclick="_kkk()">12</button>

Итак что же делать?

Answer 1

[Aetae]

Если работаешь с vue - тебе не нужно трогать dom руками и наоборот.
v-html только для статических каких-то данных.

Вот это вот <b class="aaakjhij" data="hk">jjj!!!!</b> должно быть уже в шаблоне. Если надо по условию - то использовать v-if или v-for если несколько.
Примерно так:

<script>
export default {
  data() {
    return {
      data: 'hk',
      text: 'jjj!!!!',
      show: false
    }
  },
  methods: {
    _jjj(){
      this.show = true
      this.data = 'hk';
      this.text = 'jjj!!!!';
    },
   _kkk(){
      this.data = 'ooooooooooo';
      this.text = 'ha-ha-haaaa!!!'
    }
  }
}
</script>

<template>
  <div>
    <b v-if="show" :data="data">{{text}}</b>
  </div>
  <button @click="_jjj">11</button>
  <button @click="_kkk">12</button>
</template>

Тебе надо перестать мыслить в jquery и начать мыслить в vue.

Если всё ещё остаются проблемы - опиши конкретную конечную цель, которой ты хочешь добиться, не в виде кода, а в виде результата и условий.

Comments

[Онотолий]

А если я пишу чат, где сообщения динамически появляются в том или ином div блоке, где так же список онлайн обновляется и нужно по любому привязывать с каждому такому ново-появившемуся элементу какие то данные , как я это заранее заложу в шаблон?

[Wispik]

Онотолий, не надо ничего привязывать, с этим отлично справляется vue. Сообщения храни в массиве, выводи их на страницу через v-for.

[Aetae]

Онотолий, как сказал Wispik (а так же как я упомянул в вопросе) - используй v-for:

<script>
export default {
  data() {
    return {
      messages: [],
      id: 0
    }
  },
  methods: {
    getId() {
      return this.id++;
    },
    _jjj(){
      this.messages.push({
        id: this.getId(),
        data: 'hk',
        text: 'jjj!!!!'
      });
    },
   _kkk(){
      this.messages.push({
        id: this.getId(),
        data: 'ooooooooooo',
        text: 'ha-ha-haaaa!!!'
      });
    }
  }
}
</script>

<template>
  <div v-for="{data, text, id} in messages" :key="id">
    <b :data="data">{{text}}</b>
  </div>
  <button @click="_jjj">11</button>
  <button @click="_kkk">12</button>
</template>

В vue ты работаешь с данными: если это сообщения чата - ты работаешь с сообщениями чата. А шаблон просто автоматически сам рисуется в зависимости от данных. Тебе только надо один раз задать этот шаблон, а дальше ты можешь просто забыть о вёрске. Разделение кода и представления.