Задать вопрос
Login8
@Login8
Программист, критик, наватор

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

Здравствуйте, начал изучать 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>


Итак что же делать?
  • Вопрос задан
  • 121 просмотр
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae Куратор тега Vue.js
Тлен
Если работаешь с 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.

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

Войдите, чтобы написать ответ

Похожие вопросы