Vue.js - 속성을 통해 구성 요소에 대해 여러 값(어레이)을 설정하는 방법

Vue.js - 속성을 통해 구성 요소에 대해 여러 값(어레이)을 설정하는 방법

Vue.js 구성 요소가 있는데, 이 모든 구성 요소는 외부에서 데이터를 가져온다.

예:

<vue-button icon="fa-arrow-right" text="mytext"></vue-button>

이것은 지금까지는 효과가 좋았지만, 이제 나는 그 재산에 대해 여러 가지 가치를 설정해야 한다.

이 작업은 작동하지 않음:

<vue-list items="['Entry1', 'Entry2']"></vue-list>

하나의 속성에 대해 여러 값을 설정하는 방법

---

갱신하다

나는 모범을 보이고 있지만 그것이 올바른 방법인지는 잘 모르겠지만 그것은 효과가 있다.만약 누군가가 더 좋은 방법을 알고 있다면, 나는 네가 나와 그것을 공유한다면 행복할 거야.

구성 요소를 다음과 같이 부른다.

<vue-list times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>

구성 요소의 암호는 다음과 같다.

<template>
    <div>
        <div v-for="item in timesArray">
            <span v-html="item"></span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['times'],
    data: function() {
        return {
            timesArray: [],
        }
    },
    created: function() {
        this.timesArray = JSON.parse(this.times);
    }
}
</script>

속성 바인딩 구문을 사용하십시오.

<vue-list :times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>

앞쪽의 결장을 주목하라.:times. 데이터를 구문 분석하거나 사용할 필요가 없다.

엔트리 2 문자열을 닫지 못했기 때문이 아니에요?

<vue-list items="['Entry1', 'Entry2]"></vue-list>

올바른 코드는

<vue-list items="['Entry1', 'Entry2']"></vue-list>

컴포넌트 논리가 괜찮다면 효과가 있을 것이라고 생각한다.

vue 인스턴스(instance) 변수만 사용하여 전달해야 하며, 이 fiddle을 참조하십시오.

<div id="app">
  <child  :items="items"></child>
</div>

여기서 vue 인스턴스 데이터로 정의된 항목:

new Vue({
  el: '#app',
  data: {
    full_name: "Initial Val",
    items: ['Entry1', 'Entry2']
  }
})

참조URL: https://stackoverflow.com/questions/42609979/vue-js-how-to-set-multiple-values-array-for-a-component-over-a-property