Javascript 返回后循环后的字符串列表

我想在vuetify快餐店中，在多行上显示multipleus值。 我有一个对象，我想像这样显示键值

品牌：保时捷

车型：Cayman

事实上我有

品牌：保时捷，车型：开曼群岛

这是我的功能代码：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    multiLine: true,
    snackbar: false,
    text: 'I\'m a multi-line snackbar.',
  }),

  method: {
    getResult(){
      const object = {brand: ['porsche'],model:['Cayman']}
      let result
      for (let [key, value] of Object.entries(object)) {
           result.push(`${key}: ${value}`);
      }
      console.log(result)
      this.text = result
      this.snackbar = true
    }
  }
})

---

有几个错误：

方法：

应该是

方法：

result.push如果
result
不是数组，则无法工作。您需要将其初始化为
[]

在模板中使用

{{text}}

时，VueJS会清理该值，使其不包含任何HTML。但您需要HTML来强制换行。因此，您需要改用

v-html

属性（参见下面的代码）

当显示数组（

结果

）时，它将自动转换为逗号分隔的字符串。如果这不是您想要的，您需要自己构建字符串，这可以通过

result.join（“
”）

完成

固定演示（也在屏幕上）：

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
多行：对，
snackbar:false，
文字：“我是一个多行小吃条。”
}),
方法：{
getResult（）{
const object={品牌：['porsche']，型号：['Cayman']}；
让结果=[]；
for（让对象的[key，value]进入（对象））{
push（`${key}:${value}`）；
}
控制台日志（结果）；
this.text=result.join（“
”）；
this.snackbar=true；
}
}
})

.as控制台包装{display:none！important}
开放式弹簧撑杆
接近

如果要在HTML中显示它：

result.join（“
”）

。如果要在开发人员控制台中显示它：

result.join（'\n'）

我想返回结果，所以在UIT中显示这两种方法都不起作用我的结果与上面的结果相同显示您的代码，然后我编辑了我的postdorry@blex，我的对象格式出错了。我更新我的代码。