CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
TheDevGuy
TheDevGuy

Reputation: 703

List of string after loop after returning

I want to display in a vuetify snack bar , multiplus value on multiple lines. I have an object and I want to display key value like this .

Brand: Porsche

Model: Cayman

actually I have

Brand: Porsche,Model: Cayman

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

this is my function code :

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

Upvotes: 0

Views: 206

Answers (1)

blex
blex

Reputation: 25659

There were a couple of mistakes:

  1. method: should be methods:
  2. result.push cannot work if result is not an Array. You need to initialize it to [].
  3. When using {{text}} in the template, VueJS sanitizes the value so that it does not contain any HTML. But you'll need HTML to force line returns. Hence, you need to use the v-html attribute instead (see code below).
  4. When you display an Array (result), it will automatically be converted to a comma-separated String. If that's not what you want, you need to build the String yourself, which can be done with result.join('<br>').

Fixed demo (Also on 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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

Related Questions