Question

我正在使用Vue JS（2.0.8）来呈现设备列表。我有一个由数字表示的健康状态，因此我使用一种方法将数字转换为CSS类以正确显示它。问题是Vue不呈现方法的结果，但方法调用自身。

我的Vue方法：

methods: {
    ...
    health: function (device) {
        if (device !== null) {
            switch (device.health.status) {
                case 2:
                    return "connected";
                    break;
                case 1:
                    return "warning";
                    break;
                case 0:
                    return "disconnected";
                    break;
                case -1:
                default:
                    return "unsupported";
                    break;
            }
        }
    },
    ...
}

我的HTML（我使用Laravel，因此是'@'）：

<div v-for="device in devices" class="device">
    <div class="device-top">
        <div class="device-bullet @{{ health(device) }}"></div>
        <div v-on:click="device.open = !device.open" v-bind:class="{open: device.open}" class="device-more-info"><span class="icon icon-show-more"></span>More info</div>
    </div>
</div>

这将呈现以下HTML：

<div class="device>
    <div class="device-top">
        <div class="device-bullet {{ health(device) }}"></div>
        <div class="device-more-info"><span class="icon icon-show-more"></span>More info</div>
    </div>
</div>

然而，这是奇怪的一点。如果我将@ {{health（设备）移动到device-bullet div中而不是在属性中使用它，它会像这样渲染（正确，“连接”是函数的结果）。

<div class="device>
    <div class="device-top">
        <div class="device-bullet">connected</div>
        <div class="device-more-info"><span class="icon icon-show-more"></span>More info</div>
    </div>
</div>

我尝试过任何我能想到的组合，让它正确渲染，但似乎无法找到问题。

感谢任何帮助，谢谢你。

Answer 1

属性中的插值已为removed in Vue 2.x

改为使用v-bind:class：

<div class="device-bullet" v-bind:class="[health(device)]"></div>

Answer 2

不确定laravel是如何工作的，以前从未使用过。

但是＆＃34;纯粹＆＃34; vue无法使用{{}}语法绑定html属性。您需要使用v-bind指令

<div v-bind:class="'device-bullet '+ health(device)" ></div>

如果没有v-bind:，您确实使用device-bullet {{ health(device) }}作为值。有关更多说明，请查看this docs section

Vue JS确实渲染大括号而不是结果

2 个答案: