Пользовательские события в компонентах vue.js - PullRequest
Новая
       7

Пользовательские события в компонентах vue.js

0 голосов
/ 16 октября 2018

Сценарий

Поскольку у меня есть более сложный флажок, я заключил его в отдельный компонент.Внутри шаблона родительского компонента я предпочитаю использовать v-model для привязки значения к переменной.

Мой подход основан на этом описании (https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model) взято из официальной документации.

Проблема

Когда у меня есть два custom-checkbox -элемента, и я выбираю последний, первый внутри DOM будет выбран. Так что, похоже, первыйодин потребляет событие.

Код

Следующий фрагмент кода иллюстрирует компонент флажка. 

<template>
  <div class="checkbox-part">
    <input class="checkbox-part-input" type="checkbox" name="cb" id="cb"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
    <label class="checkbox-part-label" for="cb"
      :class="{ 'checkbox-part-label--checked': checked }"
    >
    <slot name="label"></slot>
    </label>
    <!-- removed for brevetiy -->
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean,
    }
  }
}
</script>

Как мне добиться, чтобы выбранный флажок был обновлен?

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Как уже упоминалось в комментариях, проблема была вызвана жестко закодированными значениями id и name внутри компонента CheckboxPart.

Я добавил два свойства для name иvalue и добавьте их в компонент.

Фрагмент 

<!-- checkbox -->

<template>
  <div class="checkbox-part">
    <input class="checkbox-part-input" type="checkbox" 
      :name="name"
      :id="id"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
    <label class="checkbox-part-label" 
      :for="name"
      :class="{ 'checkbox-part-label--checked': checked }"
    >
      <slot name="label"></slot>
    </label>
 
    <!-- removed for brevity -->
 
  </div>
</template>

<script>
  export default {
    model: {
      prop: 'checked',
      event: 'change'
    },
    props: {
      checked: {
        type: Boolean,
      },
      name: {
        type: String,
        required: true
      },
      id: {
        type: String,
        required: true
      }
    }
  }
</script>

<!--- parent component using the one -->

<template>
  <!-- removed for brevity -->
  <!-- ... -->
 <div class="expandable-category-part-social-section">
        <checkbox-part
          v-model="isSocialIntegrationEnabled"
          :id="title + 'social-media'"
          :name="title + 'social-media'"
        >
          <template slot="label">
            <div class="checkbox-part-label-text">Final text comes here...</div>
          </template>
</checkbox-part>
</div>

<!-- ... -->

</template>
0 голосов
/ 16 октября 2018

У вас есть имя ввода, жестко закодированное в компоненте.Таким образом, вы, вероятно, визуализируете два ввода с одним и тем же именем (в данном случае «cb»). Я думаю, что вы можете передать имя ввода и идентификатор как реквизиты.

Это должно решить вашу проблему.

...