[FIXED] How to use v-on:click to change multiple content - Vuejs and Liquid

Issue

I would like to change text and image when I click on a button, I had tried this but I get stuck and I don't know how to use it to change multiple elements,

{% for variant in product.variants %}
<label for="variant_{{- variant.id }}">{{ variant.title }} - <img src="{{ variant.image | img_url: '100x100' }}" v-on:click="changeMessage('{{ variant.price | money_with_currency }}')"></label>
<input type="radio" {% if forloop.first %}checked{% endif %} class="variant_id" id="variant_{{- variant.id }}" name="productVariants" value="{{ variant.id }}"/>

<div class="variant_price d-none">{{ variant.price | money_with_currency }}</div>
<div class="variant_sku d-none">{{ variant.sku }}</div>
<div class="variant_img d-none">{{ variant.image | img_url: master }}</div>
{% endfor %}

{% raw %}{{ price }}{% endraw %}
{% raw %}{{ image }}{% endraw %}

Current look on the store

The price is now showing by default I have to click the radio button to show the price, I want it to be shown by default,

This is how it looks like after I click on the radio button

export default {
  data () {
    return {
       price: document.getElementsByClassName('variant_price').innerHTML,
       sku: document.getElementsByClassName('variant_sku').innerHTML,
       img: document.getElementsByClassName('variant_img').innerHTML,
    }
  },
  methods:  {
    changeMessage(message) {
      this.message = message
    }
  },
}

I want when I click on the radio button it gives me the price and image, my skills on JS is so bad, please I need help 🙏🙏🙏

Solution

Try to use mounted() hook to set your defaults.

export default {
  data () {
    return {
       price: document.getElementsByClassName('variant_price').innerHTML,
       sku: document.getElementsByClassName('variant_sku').innerHTML,
       img: document.getElementsByClassName('variant_img').innerHTML,
    }
  },
  mounted(){
    //set default here, like this
    this.changeMessage(message);  
  }
  methods:  {
    changeMessage(message) {
      this.message = message
    }
  },
}

Also, could you elaborate it a little bit more so that I can help you in this regard

Answered By - Shamsail

Answer Checked By - Pedro (PHPFixing Volunteer)