Как очистить директивы v-bind от HTML-кода в Vue?

Question

Хорошо, у меня есть код Vue и HTML.

Например:

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']
});

А на моей странице:

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

Все это работает, но если я читаю исходный код страницы, я вижу часть v-bind:selects="selects", которая, по-моему, не соответствует стандарту.

Аналогично, другие компоненты имеют другие свойства объекта, такие как:

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

который на странице источника оценивает что-то вроде:

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

что явно нежелательно.

Как связать эти свойства, чтобы они не отображались в DOM как атрибуты?

Answer 1

По умолчанию, когда v-bind встречает имя привязки, которое не связано со свойством цели, значение преобразуется в строку и присваивается в качестве атрибута.Поскольку <option> не имеет свойства с именем area, объект присваивается как строковый атрибут, который вы наблюдали в DOM.

Вы можете использовать v-bind '* .prop модификатор чтобы всегда назначать его как свойство:

<option :area.prop="area" ...>

Vue.component('area-selectors-box', {
  template: `
    
      
    
  `,
  props:['selects']
});

Vue.component('area-selector', {
  template: `
    
      
    
    {{selection}}

`, реквизиты: ['select'], data () {return {selection: null,}}}) Vue.component ('area-option', {template:`{{area.name}} `, реквизиты: ['area']});new Vue ({el: '#app', data: () => ({select: [{id: 1, options: [{id: 10, area: {term_id: 100, name: 'Europe'}},{id: 11, область: {term_id: 101, имя: «Азия»}},]}, {id: 2, параметры: [{id: 20, зона: {term_id: 200, имя: «Северная Америка»}}, {id: 21, область: {term_id: 201, имя: 'Южная Америка'}},]},]}),})

<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <area-selectors-box :selects="selects"></area-selectors-box>
</div>

Answer 2

Мой собственный ответ: пропускайте реквизиты при вызове компонента, а не в самом компоненте. Этот код будет работать и производить чистый HTML:

HTML-код на странице:

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

JS:

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']
});