Ok, saya punya beberapa kode Vue dan HTML.

Sebagai contoh:

Vue.component('area-selectors-box', {
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector>
    </div>
  `,
  props:['selects']
});

Dan di halaman saya:

<div is="area-selectors-box" v-bind:selects="selects"></div>

Semuanya berfungsi, tetapi jika saya membaca sumber halaman, saya melihat bagian v-bind:selects="selects", yang menurut saya tidak sesuai standar.

Demikian pula, komponen lain memiliki properti objek lain seperti:

Vue.component('area-option', {
  template: `<option :area="area" :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});

Yang pada sumber halaman dievaluasi menjadi sesuatu seperti:

<option area="[object Object]" value="82">Europa</option>

Yang jelas tidak diinginkan.

Bagaimana cara saya mengikat properti ini tanpa mereka muncul di DOM sebagai atribut?

-1
Luca Reghellin 28 Mei 2019, 01:02

2 jawaban

Jawaban Terbaik

Jawaban saya sendiri adalah: berikan alat peraga saat Anda memanggil komponen, bukan di komponen itu sendiri. Kode ini akan berfungsi dan menghasilkan html bersih:

HTML dalam halaman:

<!-- pass selects to area-selectors-box -->
<div is="area-selectors-box" :selects="selects"></div>

J:

Vue.component('area-selectors-box', { // pass select to area-selector
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector> 
    </div>
  `,
  props:['selects']
});

Vue.component('area-selector', { // pass area to area-option
  template: `
    <select @change="selected" >
      <option disabled selected value="">Seleziona continente</option>
      <area-option v-for="area in select.areas" :area="area" :key="area.term_id"></area-option>
    </select>
  `
  ,props:['select']
});

Vue.component('area-option', { // pass nothing
  template: `<option :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});
0
Luca Reghellin 28 Mei 2019, 07:18

Secara default, saat v-bind menemukan nama binding yang tidak terkait dengan properti pada target, nilai akan dikonversi menjadi string dan ditetapkan sebagai atribut. Karena <option> tidak memiliki properti bernama area, objek ditetapkan sebagai atribut string, yang Anda amati di DOM.

Anda dapat menggunakan v-bind pengubah .prop untuk selalu tetapkan sebagai properti:

<option :area.prop="area" ...>
Vue.component('area-selectors-box', {
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector>
    </div>
  `,
  props:['selects']
});

Vue.component('area-selector', {
  template: `<div>
    <select v-model="selection">
      <area-option
         v-for="option in select.options"
         :key="option.id"
         :area="option.area" />
    </select>
    <pre>{{selection}}</pre>
</div>`,
  props: ['select'],
  data() {
    return {
      selection: null,
    }
  }
})

Vue.component('area-option', {
  template: `<option :area.prop="area" :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});

new Vue({
  el: '#app',
  data: () => ({
    selects: [
      { id: 1, options: [
                { id: 10, area: { term_id: 100, name: 'Europe' } },
                { id: 11, area: { term_id: 101, name: 'Asia' } },
              ]
      },
      { id: 2, options: [
                { id: 20, area: { term_id: 200, name: 'North America' } },
                { id: 21, area: { term_id: 201, name: 'South America' } },
              ]
      },
    ]
  }),
})
<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <area-selectors-box :selects="selects"></area-selectors-box>
</div>
1
tony19 28 Mei 2019, 01:34