时间戳

首页 > 解决方案 > 单击Vuejs中的按钮时，如何在选项卡中添加存储在变量中的图像？

javascript - 单击Vuejs中的按钮时，如何在选项卡中添加存储在变量中的图像？

问题描述

我想将 gif 存储在一个名为 gifCharles 的变量中，该变量位于 Vuejs 组件的数据部分中。然后每次我点击一个按钮时，图像都会被推送到存储在变量 gifTab 中的选项卡上，这要归功于 NumberMatch 方法。不幸的是，我似乎无法让它工作，任何人都可以帮助我吗？这是代码：


<!-- SCRIPT-->
<script>

export default {
   name:'Body',
   data() {
       return {
           luckyNumber:'',
           randomNumber:'',
           number: 0,
           gifCharles:require("../assets/jpg/isolation-charles.png"),
           gifTab:[],
           scoresTab:[],
           total:0,
       }
   },

       methods: {
           RandomNumbGenerator(){
               this.randomNumber =  Math.floor(Math.random()*11);
               return this.randomNumber
           },

           InputValue(){
               this.luckyNumber = document.getElementById("input_lucky_numb").value;
           },

           NumberMatch(){
               if(this.randomNumber == this.luckyNumber){
                 var tabGif = this.gifTab.push(this.gifCharles)
                 return tabGif
               }
           }
       },
};
</script>

标签： javascriptvue.js

解决方案

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push -- 是一个可变事件。这意味着它不会返回新对象，而是修改原始对象。

在NumberMatch中，尝试任一：

保持推送，并引用this.gifTab而不是NumberMatch.

或切换到concat，并返回该结果。

             this.gifTab = this.gifTab.concat(this.gifCharles)
             return this.gifTab

TLDR；push 返回“调用该方法的对象的新长度属性。” 不是新值。concat有你想要的行为。

推荐阅读