Как в Vue проверить значение в data() на true и false

Question

Впервые работаю с vue, первый проект. В функции greet нужно проверять, отмечен ли какой-либо checkbox.

if (checkedUppercase == true) {

} разумеется не работает. Как еще можно проверить?

HTML:

        <div class="checkbox">
          <input type="checkbox" id="uppercase" value="uppercase" v-model="checkedUppercase"> 
            <label for="uppercase">uppercase</label>
            <p>{{checkedUppercase}}</p>
        </div>
        <div class="checkbox">
          <input type="checkbox" id="lowercase" value="lowercase" v-model="checkedLowercase"> 
            <label for="lowercase">lowercase</label>
            <p>{{checkedLowercase}}</p>
        </div>
        <div class="checkbox">
          <input type="checkbox" id="numbers" value="numbers" v-model="checkedNumbers"> 
            <label for="numbers">numbers</label>
            <p>{{checkedNumbers}}</p>
        </div>
        <div class="checkbox">
          <input type="checkbox" id="symbols" value="symbols" v-model="checkedSymbols"> 
            <label for="symbols">symbols</label>
            <p>{{checkedSymbols}}</p>
        </div>
        <p v-on:click='greet'>show</p>
    </div>

скрипт:

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
  greet: function() {
    
    }
  },
  data() {
    return {
      value: '10',
      checkedUppercase: false,
      checkedLowercase: true,
      checkedNumbers: true,
      checkedSymbols: false,

    }
  }
}

Answer 1

Некорректно оформлен метод. Должно быть так:

methods: {
    greet () {
        console.log(this.checkedUppercase)
        if (this.checkedUppercase) {
            // Делаем, если true
        } else {
            // Делаем, если false
        }
    }
}

Тестировал тут - Рабочий пример Vue

Это мои первые строки на Vue, так что если что не так назвал, извиняйте...

Answer 2

Все методы выполняются с привязкой контекста к объекту, который вы возвращаете из функции data. Т. е. считайте, что ваш метод greet был привязан к контексту data.

Как если бы инициализация выглядела так:

const data = module.data();
module.methods.greet = module.methods.greet.bind(data);

Поэтому, для доступа к полям из data вам нужно использовать this

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    greet() {
      console.log({
        checkedUppercase: this.checkedUppercase,
        checkedLowercase: this.checkedLowercase,
        checkedNumbers: this.checkedNumbers,
        checkedSymbols: this.checkedSymbols,
      });

      if (this.checkedUppercase) {
        // ...
      }
    }
  },
  data() {
    return {
      value: '10',
      checkedUppercase: false,
      checkedLowercase: true,
      checkedNumbers: true,
      checkedSymbols: false,

    }
  }
}

Ещё стоит отметить, что в шаблоне (в тегах в template) использовать this хоть и можно, но не нужно

БЛОГ НА HUSL

Как в Vue проверить значение в data() на true и false

Ответы (2 шт):