문자열을 구성 요소로 교체하는 방법(vue)하는 방법

문자열을 구성 요소로 교체하는 방법(vue)하는 방법

나는 다음을 포함하는 끈을 가지고 있다.###배열 값으로 대체한다이제 컴포넌트를 사용해서 컴포넌트를 만들었는데 어떻게 사용하는지 모르겠어.줄이 어떻게 될지 모르기 때문에 수동으로 포장하고 싶지 않고 여러 개가 들어갈 수 있다.###. 만약 2개라면.###옵션에는 2개의 하위 Array가 있다.

그것을 하는 더 좋은 방법은 무엇인가?

코드: https://jsfiddle.net/tsobh4nu/

Vue.component('opt', {
  template: `<label>
                <span class="bold" v-for="(str,idx) in options">
                     {{str + " / "}}
                </span>
             </label>`,
  props:{options: Array}
})

new Vue({
  el: '#app',
  data: {
    str: "I have ### and you have a ###.",
      options: [
        ['AAA', 'BBB', 'CCC'],
        ['XXX', 'YYY', 'ZZZ']
      ]
  },
  computed:{
  	replacedStr(){
    	let newStr = this.str;
      this.options.forEach(option=>{
      	newStr = newStr.replace('###',this.concatenateOptions(option));
      })
      return newStr;
    }
  },
  methods: {
    concatenateOptions(strArr) {
      let separator = "";
      let strOptions = "";
      strArr.forEach(word => {
        strOptions += separator  + word;
        separator = " / ";
      });
      return strOptions;
    }
  }
})

.bold {
  font-weight: bold
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <p>I want something like this, but using components: </p>
  {{replacedStr}}
  <br>
  <hr>
  My Components:<br>
  <opt :options="options[0]"></opt>
  <br>
  <opt :options="options[1]"></opt>
</div>

대단히 고맙습니다

이것은 좀 더 일반적이지만 누군가에게 도움이 되었으면 좋겠어.템플릿에 동적 구성 요소 추가:<component v-bind:is="processedHtml"></component>.

그런 다음 계산된 방법을 추가하십시오.

computed: {
    processedHtml () {
        let html = this.html.replace('[Placeholder]', '<my-component></my-component>');
        return {
            template: '<div>' + html + '</div>'
        }
     }
}

어디.<my-component>사용자 지정 구성 요소 및this.html플레이스홀더를 포함하는 HTML 컨텐츠[Placeholder].

루트 노드가 하나 있는 요소를 반환하는 것이 중요하다.그래서 반환은 로 포장되어 있는 것이다.<div>.

내 블로그에서 이 문제에 대한 고급 자습서를 읽어보십시오.예를 들어 소품을 전달하려면<my-component>

나는 단지 같은 문제를 경험했을 뿐이다.나는 항목의 현재 수를 표시해야 하는 요소를 가지고 있었다.현재의 카운트는 가게에서 나와 끊임없이 변화하고 있었다.v-text를 사용했어.나는 이것이 꽤 구체적인 상황이라는 것을 알지만, 바라건대 그것은 누군가에게 도움이 되기를 바란다.

<P id="results_count" v-text="current_count"></P> 

그리고 구성 요소의 데이터 부분에서는 current_count라는 속성을 가지고 있었는데, 이 속성은 방법을 통해 업데이트되었다.

언급URL: https://stackoverflow.com/questions/53257153/how-to-replace-a-string-with-a-component-vue