Vue.Js - How to Concat One Key Value to Another Key'S Value

Vue.js - how to concat one key value to another key's value

We can make it like this

new Vue({
 el: '#vue-app',
 data: {
   name: 'Shaun',
   link: 'https://stackoverflow.com'
 }
});

<template>
  <a :href="link">This is a link</a>
</template>

PLS note that should be :href="link",not href="{{ link }}",here is different from @Rick Calder 's answer, that is not available in Vue 2.0

Vue.js - how to concat one key value to another key's value

We can make it like this

new Vue({
 el: '#vue-app',
 data: {
   name: 'Shaun',
   link: 'https://stackoverflow.com'
 }
});

<template>
  <a :href="link">This is a link</a>
</template>

PLS note that should be :href="link",not href="{{ link }}",here is different from @Rick Calder 's answer, that is not available in Vue 2.0

Add object with same key in vuejs

You can extract the values from the object using Object.values(), then join both of the values using array#concat then using Object.assign() create your object.

const obj1 = {0: 'value1', 1: 'value2'},      obj2 = {0: 'value3', 1: 'value4'},      result = Object.assign({}, Object.values(obj1).concat( Object.values(obj2)));console.log(result);

Concatenate a string on map function javascript

Try this:

Object.keys(this.lengthOfStay).map(k =>  {
   return `${this.lengthOfStay[k]} ${k}.` 
}).join(" & ")

FOR FIRST KEY UPPERCASE

Object.keys(this.lengthOfStay).map(k =>  {
   return `${this.lengthOfStay[k]} ${k.charAt(0).toUpperCase() + k.slice(1)}.` 
}).join(" & ")

how to concatenate (variable + object key names) to get the object values in dot notation

Simply do

myObj['question'+i]

This is because the dot operator would not accept string with it as per javascript. So you will have to use square brackets instead which is often used to access properties of an object dynamically.

How to add a new object (key-value pair) to an array in javascript?

Use .push:

items.push({'id':5});

Vue How to Merge Two Arrays From Same Object?

You could 1️⃣spread the incorrect_answers into a new array with correct_answer, and then 2️⃣ attach the result as a new property on the original data. Additionally, 3️⃣ you could shuffle the answers while you're at it:

const newData = data.map(x => {
  const answers = [x.correct_answer, ...x.incorrect_answers] /*1️⃣*/
  x.answers /*2️⃣*/ = shuffle(answers) /*3️⃣*/
  return x
})

This new array could be used as a computed property (e.g., named questions) in your template:

<fieldset v-for="q in questions" :key="q.question">

const rawData = {
  "results": [
    {
      "question": "Where was the Games of the XXII Olympiad held?",
      "correct_answer": "Moscow",
      "incorrect_answers": [
        "Barcelona",
        "Tokyo",
        "Los Angeles"
      ]
    },
    {
      "question": "What is the first weapon you acquire in Half-Life?",
      "correct_answer": "A crowbar",
      "incorrect_answers": [
        "A pistol",
        "The H.E.V suit",
        "Your fists"
      ]
    },
  ]
}

new Vue({
  el: '#app',
  data() {
    return {
      rawData: rawData.results
    }
  },
  computed: {
    questions() {
      return this.rawData.map(x => {
        const answers = [x.correct_answer, ...x.incorrect_answers]
        x.answers = shuffle(answers)
        this.$set(x, 'answer', null) // create reactive answer prop
        return x
      })
    }
  }
})

// https://stackoverflow.com/a/2450976/6277151
function shuffle(array) {
  let currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <form action="#">
    <fieldset v-for="(q,i) in questions" :key="q.question">
      <h2>{{q.question}} {{q.answer}}</h2>
      
      <div v-for="a in q.answers" :key="a">
        <label>
          <input type="radio" :name="i" :value="a" @change="q.answer = a">
          <span>{{a}}</span>
        </label>
      </div>
    </fieldset>
  </form>
</div>

VueJs 2.x stylebind with object with multiple keys not working

The bug lies in the way Vue handles reactivity.

Since I tried to add key/value pair to styleObject like this:

this.styleObject.backgroundPosition = `${image.anchor.x} ${image.anchor.y}`;

Vue could not detect the change since the keys i tried to reference was not declare beforehand. The solution could be defining all future could be keys, which would work just fine. However using vm.$set() would be better since it handles creating the key and initiates the reactivity at the same time. In short this line (and the others which did the same):

this.styleObject.backgroundPosition = `${image.anchor.x} ${image.anchor.y}`;

Became this:

this.$set(this.styleObject, 'background-position', `${image.anchor.x} ${image.anchor.y}`);

Vue documentation about the reason for the change:
https://v2.vuejs.org/v2/guide/reactivity.html

merge 2 values and put in a v-data-table column (Vuetify)

You can render a virtual column with the use of slots with v-data-table. But you need to have a column full_name.

<v-data-table :headers="headers" :items="items">
  <template #item.full_name="{ item }">{{ item.first_name }} {{ item.last_name }}</template>
</v-data-table>

export default {
  data() {
    return {
      items: [
        { first_name: "Peter", last_name: "Johnson" },
        { first_name: "Simon", last_name: "Walker" }
      ],
      headers: [{ text: "Full Name", value: "full_name" }]
    };
  }
};

https://vuetifyjs.com/en/components/data-tables#slots

Vue.Js - How to Concat One Key Value to Another Key'S Value

Vue.js - how to concat one key value to another key's value

Vue.js - how to concat one key value to another key's value

Add object with same key in vuejs

Concatenate a string on map function javascript

how to concatenate (variable + object key names) to get the object values in dot notation

How to add a new object (key-value pair) to an array in javascript?

Vue How to Merge Two Arrays From Same Object?

VueJs 2.x stylebind with object with multiple keys not working

merge 2 values and put in a v-data-table column (Vuetify)

Related Topics

Leave a reply