Можем ли мы использовать реквизит в функции рендера компонента Vue.js? - PullRequest
Новая
       6

Можем ли мы использовать реквизит в функции рендера компонента Vue.js?

0 голосов
/ 31 декабря 2018

Я создал следующий компонент - 

Vue.component('tick-button', {
    data(){
        return {  count:0}
    },

props:{
    tick:{type: Boolean, default: false},
    tickNumber:{type: Number, default: 0}
},

render(createElement){
    return createElement('button', {
        'class':'button tick',
        attrs:{value: this.tickNumber},
        on:{
            click(e){
                console.log(this.tick+ "-" + this.tickNumber);
                var reqData = {
                        isTick: this.tick,
                        tickNumber: e.srcElement.value
                };
                fetch("http://localhost:8080/tickcounter/", 
               {
                    body: JSON.stringify(reqData),
                    method: "POST",
                    headers: {"Content-Type": "application/json",},
                })
                .then(response => response.json()).then((data) => {})
            }
        }
    }, this.tickNumber)
}

})

Теперь он используется как - 

<tick-button tickNumber="0" v-bind:tick='true'></tick-button>
<tick-button tickNumber="1" v-bind:tick='true'></tick-button>

Значение JSON, переданное с этим вызовом API: - 

{
    "tickNumber": 1
}

Теперь, когда я нажимаю на эту кнопку, выполняется вызов REST, но он не может передать логическое значение для элемента tick в запросе json.Даже журнал, напечатанный в консоли, также выглядит так - 

undefined-1

Кажется, значение пропа не доступно в функции рендеринга.Любая идея, как мы можем получить доступ к значению проп в функции рендеринга компонента Vue?

...