Блог

Я создаю форму и хочу показывать определенные поля только при нажатии определенной кнопки, но убирайте эти поля и показывайте другие поля при нажатии другой кнопки.

Я новичок в vue (и кодировании), но я думаю, что хочу использовать v-if, но, похоже, я не могу вернуть значения обратно в поле v-if.

Если выбран ЖУРНАЛ типов, то метод устанавливает typeIsMagazine в значение TRUE, а другие селекторы типов-в значение FALSE. Я ожидал бы, что, как только typeIsMagazine будет установлен в значение true, тогда сработает v-if и будут показаны поля формы.

Метод запускается, и я тестирую его с помощью консоли.войдите, чтобы я знал, что функции if работают. Я просто не думаю, что его вернут в в-если.

 <template>
<form @submit.prevent="handleSubmit">
 <label class="main">Type:</label>
 <div class="type-row">
  <div class="sub-column">
    <div
      class="sub"
      @click="updateType('auto_stories')"
      :class="{ selected: type === 'auto_stories' }"
    >
      Book
    </div>
  </div>
  <div class="sub-column">
    <div
      class="sub"
      @click="updateType('article')"
      :class="{ selected: type === 'article' }"
    >
      Article
    </div>
  </div>
  <div class="sub-column">
    <div
      class="sub"
      @click="updateType('website')"
      :class="{ selected: type === 'website' }"
    >
      Website
    </div>
  </div>
</div>
<template v-if="typeIsWebsite">
  <label class="main">Website:</label>
  <input type="text" class="text" v-model="url" required />
</template>
<template v-if="typeIsArticle">
  <label class="main">Magazine:</label>
  <input type="text" class="text" v-model="magazine" required />
</template>

<button class="form">Add Entry</button>
</form>
</template>

<script>
 export default {
data() {
return {
  typeIsWebsite: false,
  typeIsArticle: false,
  typeIsBook: false,
};
},
methods: {

updateType(typeSelect) {
  this.type = typeSelect;
  let typeIsWebsite = false;
  let typeIsBook = false;
  let typeIsArticle = false;

  if (typeSelect === "website") {
    typeIsWebsite = true;
    typeIsArticle = false;
    typeIsBook = false;
  } else if (typeSelect === "article") {
    typeIsWebsite = false;
    typeIsArticle = true;
    typeIsBook = false;
  } else if (typeSelect === "auto_stories") {
    typeIsWebsite = false;
    typeIsArticle = false;
    typeIsBook = true;
  }
  return typeIsWebsite, typeIsArticle, typeIsBook;
 },
 

В updateType , ваши переменные typeIsWebsite typeIsBook , и т.д. объявляются как локальные переменные с помощью let. Таким образом, при выполнении вы if обновляете локальные переменные , а не переменные экземпляра вашего компонента. Чтобы исправить это, удалите typeIsX объявления переменных в updateType и используйте this.typeIsX для ссылки на каждую переменную. Вот так:

 updateType(typeSelect) {
  this.type = typeSelect;

  if (typeSelect === "website") {
    this.typeIsWebsite = true;
    this.typeIsArticle = false;
    this.typeIsBook = false;
  } else if (typeSelect === "article") {
    this.typeIsWebsite = false;
    this.typeIsArticle = true;
    this.typeIsBook = false;
  } else if (typeSelect === "auto_stories") {
    this.typeIsWebsite = false;
    this.typeIsArticle = false;
    this.typeIsBook = true;
  }
 }
 

Наконец, функции не нужно ничего возвращать.

В качестве дополнительного совета обратите внимание, что это действительно подробный код, и, по крайней мере, в вашем случае использования вам не нужны все флаги. Достаточно было бы просто сохранить текущий тип в виде строки, а затем сравнить его с этим. Например: this.typeIsWebsite эквивалентно this.type === 'website' .

Помните: чем меньше кода, тем меньше ошибок!