Vue как указать динамическое свойство?

Question

[des1roer]

<main class="main">
                <div class="inner" align='center'>{{val}}<br>
                    <div class="form-group" :class="{'has-error' : name.length == 0}">
                        <input class="form-control" v-model="name" style="width: 200px;  margin: 0 auto;">
                    </div>
                    <br>
                    <img :src="url" height="500">
                    <br><br>
                    <a href="/army/" class="btn btn-success" role="button" v-show='name.length != 0'>Ok</a>
                </div>
            </main>
            <aside class="sidebar-first" @click.prevent="prev">
                <a class="carousel-control left" href="#">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
            </aside>
            <aside class="sidebar-second" @click.prevent="next">
                <a class="carousel-control right" href="#">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </aside>

как я могу заменить name.length на hasError

если указывать

var vm = new Vue({
    el: '#app',
    data: {
        rows: data,
        val: '',
        url: null,
        name: '',
        user_id: user_id,
        hasError: this.name.length == 0,
    },

то ничего не меняется

т.е. в зависимости от введенных знаков менялась переменная

-------------------------------------
сделал

<div class="form-group" :class="{'has-error' : hasError">

computed: {
        hasError: function () {
            return String.prototype.trim(this.name).length == 0;
        }
    },

получил

- invalid expression: :class="{'has-error' : hasError"


(found in root instance)

Answer 1

[akass]

el: '#app',
    data: {
        rows: data,
        val: '',
        url: null,
        name: '',
        user_id: user_id,
    },
computed: { 
       hasError: function() {
                     return this.name.length == 0;
                     }
}

Answer 2

[Anton Filippov]

Читайте официальную документацию, она изумительно хорошо написана.

https://vuejs.org/v2/guide/computed.html

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})