2

Я вставляю html разметку через v-html и у меня не срабатывает событие на нажатие по этому элементу, причину понял - это связано с тем, что у меня не скомпилирована то, что я вставляю. И такой вопрос как скомпилировать элемент, которую я вставляю через v-html?

new Vue({
    el: '#app',
    data: {
        msg: 'Hellow world',
        check: '',
        life: 0,
        inspan: []
    },
    mounted(){
        this.life = 3;
        for (var i=0; i<6; i++){
            this.inspan.push('<span class="block" id="'+i+'" v-on:click="inspect"></span>')
        } 
    },
    methods:{
        inspect: function(event){
            console.log("Hello");
        }
    }
})


----------
## html ##

<body>
    <div id="app" class="content">
        <div class="section">
            <p>Количество жизни:{{life}}</p>
            <p>Запомните местоположение фигур</p>
            <div class="inp_section">
                <a v-for="sp in inspan" v-html="sp"></a>
            </div>
            <p>{{check}}</p>
        </div>
    </div>
    <script src="main.js"></script>
</body>

1 ответ 1

1

Управляет HTML-содержимым элемента (innerHTML). Обратите внимание, что содержимое вставляется как обычный HTML — то есть не компилируется как шаблон Vue.

источник


v-html для того и сделан, чтобы Vue обрабатывал содержимое как строку. Вы же в точности наоборот хотите получить.

Используйте <a v-for="..." @click="inspect", либо создайте полноценный дочерний компонент, что предпочтительнее.

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

const app = new Vue({
  el: '#app',
  data: {
    // Модель с элементами.
    collection: [],
    // Остальные ваши данные.
    msg: 'Hellow world',
    check: '',
    life: 0,
  },
  // При монтировании экземпляра приложения,
  // получаем данные из вне, либо создаем на месте.
  mounted() {
    for (var i = 1; i < 8; i++) {
      // Добавляем в коллекцию объект.
      this.collection.push({
        id: i,
        title: `Item ${i}`
      });
    }
  },
  methods: {
    inspect(event, index) {
      // Просто выбираем объект по переданному индексу.
      const item = this.collection[index];

      alert(item.id + ': ' + item.title);
    }
  }
});
<div id="app" class="content">
  <div class="section">
    <p>Количество жизни: {{ life }}</p>
    <p>Запомните местоположение фигур</p>
    <ul class="inp_section">
      <li v-for="(item, index) in collection" :key="item.id">
        <a href="#" @click.prevent="inspect($event, index)">
          <span class="block">{{ item.title }}</span>
        </a>
      </li>
    </ul>
    <p>{{ check }}</p>
  </div>
</div>

<!-- <script src="main.js"></script> -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Как видно из примера, мы не добавляем в коллекцию готовые html куски, а добавляем объекты.


Директива v-html применяется (и не только) при создании WYSIWYG редакторов, когда используется атрибут contenteditable.

<div contenteditable="true" v-html="..."></div>
5
  • Мне надо знать id элемента на которую пользователь нажимал, а если я в тег <a> запишу событие @click, то не смогу взять id <span>. Может есть какие-то альтернативные варианты, когда можно скомпилировать и так же через v-html вставить? 22 июн 2019 в 16:25
  • Был бы очень благодарен если подсказали)) 22 июн 2019 в 16:27
  • Нет оно у меня будет меняться, только я еще полностью не дописал - это был как тестовый вариант, чтоб хотя бы что-то заработала. 22 июн 2019 в 16:30
  • Могу вам отправить полностью проект, чтобы вы полностью вникли, то, что я хочу сделать 22 июн 2019 в 16:33
  • Огромное спасибо вам, теперь я понял предназначение v-html и как все таки правильно делать.Вы супер!!! 22 июн 2019 в 17:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.