如何使用 v-on:click 更改多个内容 - Vuejs 和 Liquid

Question

我想在单击按钮时更改文本和图像，我试过这个但是我卡住了，我不知道如何使用它来更改多个元素，

{% 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

现在默认显示价格我必须单击单选按钮才能显示价格，我希望它默认显示，

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

我想要当我点击单选按钮时它会给我价格和图片，我的 JS 技术太差了，我需要帮助

Answer 1

为了使用 v-on:click on a button 更改另一个元素，您应该向这些元素添加一个参数 ref="nameOfRef"，然后 select 在您在 v- 上调用的方法中添加它们在：点击喜欢：this.$refs.nameOfRef

示例：

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

Answer 2

尝试使用 mounted() 挂钩来设置默认值。

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

还有，你能不能再详细一点，这样我可以在这方面帮助你

如何使用 v-on:click 更改多个内容 - Vuejs 和 Liquid

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

javascript

shopify

vue.js