Есть ли способ принудительной компиляции или рендеринга компонента с использованием текста внутри руля интерполяции - PullRequest
Новая
       12

Есть ли способ принудительной компиляции или рендеринга компонента с использованием текста внутри руля интерполяции

0 голосов
/ 01 мая 2018

Я использую какой-либо сторонний компонент Vue, который позволяет мне задать заголовок группы HTML-элемента, и текст отображается внутри тега легенды.

Насколько я понимаю, текст интерполяции Vue может выполнять лишь несколько операций.

И мне интересно, есть ли способ визуализировать пользовательский компонент vue в руле интерполяции vue.

например. Внутри шаблона моего vue компонента ... 

<template>

  <div class="row">
     <legend>{{ Text_Or_CustomVueComponentTag }} </legend>
     ...
  </div>
</template>

Есть ли какой-нибудь хак, который я могу сделать, чтобы сделать свой собственный компонент внутри руля?

1 Ответ

0 голосов
/ 01 мая 2018

На самом деле, я не думаю, что это неправильный путь (в основном на основе опций). И пример, который вы опубликовали, использует Усы , он заменит свойство value одного элемента dom.

Как сказано в Vue Guide :

Тег усов будет заменен значением свойства msg на соответствующем объекте данных. Он также будет обновляться всякий раз, когда Изменено свойство msg объекта данных.

Хотя мы можем обновить innerHTML напрямую с помощью директивы v-html. Но я не думаю, что вы получите какую-либо выгоду, если используете v-html, почему бы не использовать непосредственно ваш дочерний компонент. 

Vue.component('child', {

  template: '<div><span style="background-color:green">{{ updatedArray }}</span><div style="background-color:red">{{computedArray}}</div></div>',
  props: ['updatedArray'],
  computed: {
    computedArray() {
      if(this.updatedArray.item.length > 0) {return this.updatedArray}
      else {return "other item"}
    }
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      testArray: {
        'item': 'test',
        'prop1': 'a'
      },
      childComponent1: '<div>Nothing</div>',
      childComponent2: '<div>Nothing</div>'
    }
  },
  methods:{
    resetArray: function() {
      this.testArray['item'] += this.testArray['prop1'] + 'b'
      this.childComponent1 = this.$refs.test.$el.innerHTML
      setTimeout(()=>{this.childComponent2 = this.$refs.test.$el.innerHTML}, 0)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<button v-on:click="resetArray()">Click me</button>
<child ref="test" v-bind:updated-array="testArray"></child>
<div v-html="childComponent1"></div>
<div v-html="childComponent2"></div>
</div>
...