Shopify Question posted in
The Shopify help center can be found here.

How to use v-on:click to change multiple content – Vuejs and Liquid – Shopify

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 🙏🙏🙏

Tags:

2

Answers


  1. 0

    In order to change another element using v-on:click on a button you should add to these elements a parameter ref="nameOfRef" and then select them in the method you called on the v-on:click like: this.$refs.nameOfRef

    Example:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

    <main id="vue-app">
      
      <div ref="div">Hello world</div>
      <button type="button" v-on:click="hideElements()">Hide!</button>
      <button type="button" v-on:click="showElements()">Show!</button>
        
    </main>

<script>
    var app = new Vue({
        el: "#vue-app",
        methods: {

            hideElements: function () {
                this.$refs.div.style.display = "none";
            },
            showElements: function () {
                this.$refs.div.style.display = "inherit";
                
            }
        }
    });
</script>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search