'v-if'在添加到'return'函数时不起作用。 为什么？

Question

v-if="css_max_count[i] == true works fine, but if I add a return , then this code does not work. Any reasons?

short code:

<div class="ui form" v-for="(im, i) in sorted_listim"> 
    <div  class="ui left pointing red basic label" v-if="css_max_count[i] == true">
        {{im.count_buy}}
    </div>

    <div @click="add_dar(i)" class="ui right small basic green button" ><h3>+</h3>
    </div>

</div>


add_dar(i) {
    if (im.count_buy < count) {
        this.css_max_count[i] = true
        // return - ??????
    } else this.css_max_count[i] = false
}

Answer 1

When you add a return to the expression, an error occurs because it generates invalid javascript.
The way vue's v-if works is it accepts an expression, which wrapped up in a new Function object, which contains its own return.

function checkExpression (exp: string, text: string, warn: Function, range?: Range) {
  try {
    new Function(`return ${exp}`)
  }
  ...
  ...

The difference between the two is return css_max_count[i] == true vs return return css_max_count[i] == true .

Adding return makes an invalid function and an error is thrown. You should have seen an error in your console when this happened because it gets warned out, regardless of environment.

See checkExpression in the vue error-detector for the source.