javascript - 返回后循环后的字符串列表

Question

我想在 vuetify snackbar 中显示多行的倍增值。我有一个对象，我想像这样显示键值。

品牌:保时捷

型号:开曼

其实我有

品牌:保时捷，型号:Cayman

https://codepen.io/czechsebastian/pen/jOPeEEr?editors=1011

这是我的函数代码:

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
    }
  }
})

Answer 1

有几个错误:

1. method:应该是methods:
2. result.push如果 result 则无法工作不是数组。您需要将其初始化为 [] .
3. 使用{{text}}时在模板中，VueJS 会清理该值，使其不包含任何 HTML。但您需要 HTML 来强制换行。因此，您需要使用v-html属性而不是(参见下面的代码)。
4. 当您显示数组 ( result ) 时，它将自动转换为以逗号分隔的字符串。如果这不是您想要的，您需要自己构建字符串，可以使用result.join('<br>')来完成。 .

修复了演示(也在 Codepen 上):

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

  methods: {
    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.join('<br>');
      this.snackbar = true;
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><style>.as-console-wrapper{display: none!important}</style>
 
<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-btn dark color="red darken-2" @click="getResult">
        Open Snackbar
      </v-btn>
      <v-snackbar v-model="snackbar" :multi-line="multiLine">
        <div v-html="text"></div>
        <v-btn color="red" @click="snackbar = false">
          Close
        </v-btn>
      </v-snackbar>
    </div>
  </v-app>
</div>