Как реализовать связанные select’ы?

Для реализации связанных select'ов с использованием Vue.js следует использовать функциональность директивы v-model.

Директива v-model в Vue.js связывает данные модели с элементами интерфейса, такими как <input>, <select>, <textarea>. При изменении данных модели, связанный элемент также изменяется, и наоборот.

Для реализации связанных select'ов потребуется использовать следующую структуру данных:

data() {
  return {
    selectedCategory: null,
    selectedSubcategory: null,
    categories: [
      {
        id: 1,
        name: 'Category 1',
        subcategories: [
          {
            id: 1,
            name: 'Subcategory 1'
          },
          {
            id: 2,
            name: 'Subcategory 2'
          }
        ]
      },
      {
        id: 2,
        name: 'Category 2',
        subcategories: [
          {
            id: 3,
            name: 'Subcategory 3'
          },
          {
            id: 4,
            name: 'Subcategory 4'
          }
        ]
      }
    ]
  }
}

Здесь selectedCategory и selectedSubcategory представляют выбранные значения для категории и подкатегории, а categories содержит список категорий соответствующих подкатегорий.

В шаблоне Vue.js можно использовать двойную привязку данных (double data binding) с помощью директивы v-model. Вот пример шаблона для связанных select'ов:

<select v-model="selectedCategory">
  <option value="">Select category</option>
  <option v-for="category in categories" :value="category.id">
    {{ category.name }}
  </option>
</select>

<select v-if="selectedCategory" v-model="selectedSubcategory">
  <option value="">Select subcategory</option>
  <option v-for="subcategory in selectedCategory.subcategories" :value="subcategory.id">
    {{ subcategory.name }}
  </option>
</select>

В приведенном выше примере первый select содержит список категорий, а второй select отображается только в том случае, если выбрана категория (v-if="selectedCategory"). Второй select отображает список подкатегорий, связанных с выбранной категорией.

При изменении выбранной категории, Vue.js автоматически обновит список подкатегорий и установит выбранное значение для selectedSubcategory, если оно есть. Если выбранная категория не имеет подкатегорий, второй select будет пустым.

Таким образом, при использовании директивы v-model и правильной настройке данных и шаблона, можно легко реализовать связанные select'ы в Vue.js.