0

Задача простая, если товар на складе, должно быть сообщение "В наличии", и наоборот. Можно это делать через v-if вот так.

new Vue({
  el: "#app",
  data: {
    inStock: true
  }
})
<style>
	span {
		font-size: 30px;
		font-weight: 700;
	}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <div id="app">
    <span v-if="inStock">В наличии</span>
	  <span v-else>Нет в наличии</span>
  </div>

А можно через наблюдение за свойством и переопределением значения, отображаемого внутри блока. Так:

new Vue({
  el: "#app",
  data: {
    message: "В наличии",
    inStock: true
  },
  watch: {
    inStock: function () {
			if (this.inStock) {
				this.message = "В магазине";
			}
			else {
				this.message = "Нет в наличии";
			}
    }
  },
  methods: {
    change: function () {
      this.inStock = this.inStock ? false:true;
    }
  }
  
})
span {
		font-size: 30px;
		font-weight: 700;
	}
  button {
    display: block;
  }
<div id="app">
    <span>{{message}}</span>
    <button @click="change">сменить состояние</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

С кнопкой пришлось добавить чтобы показать как меняется значение. Какой подход более правильный. В 1-м смущает, что надо добавлять или убирать узел DOM(как я понимаю, span не соответствующий условию, удаляется из DOM

1 ответ 1

1

Начнем с того, что заменим строку this.inStock = this.inStock ? false:true; на this.inStock = !this.inStock; И первый подход гораздо менее многословный и более понятный. Да, узел DOM удаляется и добавляется. Чтобы просто скрывать юзайте v-show. Кстати можете убрать watch и сделать message вычисляемым свойством, возвращая нужный текст в зависимости от this.inStock. Тогда темплейт будет как во втором варианте.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.