Конкатенация строк в привязке значений в Vue - PullRequest
Новая
       12

Конкатенация строк в привязке значений в Vue

0 голосов
/ 22 сентября 2018

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

Примерно так. 

Vue.component('button-counter',{
    data:function(){
        return { count : 0}
    },
    template:"<input type='button' v-on:click='count++' v-bind:value='"Total Counter :"+count'/>"
})

Но, похоже, синтаксис неправильный.Может кто-нибудь, пожалуйста, помогите мне, как я могу достичь этого.

Например, есть другой способ сделать это, например: 

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Но возможно ли достичь с помощью привязки значений?

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

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

Двойные кавычки необходимо экранировать косой чертой.Это не имеет ничего общего с Vue, это сырой JavaScript: 

template:"<input type='button' v-on:click='count++' v-bind:value='\"Total Counter :\"+count'/>"

Хотя это не так, я бы также предложил сокращение от v-on:click до @click и v-bind:value до :value. 

template: "<input type='button' @click='count++' :value='\"Total Counter :\" + count'/>"
0 голосов
/ 22 сентября 2018

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

new Vue(({
  el: "#app",
  data:function(){
    return { count : 0}
  },
  computed: {
    buttonText() {
      return "Total Counter : " + this.count; 
    }
  }, 
  template:"<input type='button' v-on:click='count++' v-bind:value='buttonText'/>"
}))
...