Question

我有这个vuejs代码，我试图用按钮做循环效果。我希望按钮在第三次单击按钮后直接返回第一个注释（即在Javascript中）。下面是我的HTML和Javascript代码。非常感谢提前。

HTML：

<script>
export default{
  data(){
    return{
    testimonialData: [
      {
        name: 'W',
        comments: 'It was great.',
        stars: 5
      },
      {
        name: 'Tom',
        comments: 'Easy to use.',
        stars: 4
      },
      {
        name: 'Has',
        comments: 'Test',
        stars: 3
      }
    ],
    number: 0
  }
  },
  methods:{
    increment: function(){
      this.number ++;
    },
  },
}
</script>

使用Javascript：

<html>
<head>
</head>
<body>
  <div id="reportContainer" style="width: 100%; height: 610px" aria-atomic="True" aria-multiline="True" aria-multiselectable="True" aria-orientation="vertical">
  </div>
  <script src="~/Scripts/powerbi.js"></script>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

  <script>
    $(document).ready(function() {    
      var txtAccessToken = "@Model.EmbedToken.Token";   
      var txtEmbedUrl = "@Html.Raw(Model.EmbedUrl)";
      var txtEmbedReportId = "@Model.Id";        
      var tokenType = $('input:radio[name=tokenType]:checked').val();
   
      var models = window['powerbi-client'].models;
  
      var permissions = models.Permissions.All;

      var config = {
        type: 'report',
        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        id: txtEmbedReportId,
        permissions: permissions,
        settings: {
          layoutType: models.LayoutType.MobilePortrait
        }
      };

      // Get a reference to the embedded report HTML element

      var embedContainer = $('#reportContainer')[0];

      // Embed the report and display it within the div container.
      var report = powerbi.embed(embedContainer, config);

      // Report.off removes a given event handler if it exists.
      report.off("loaded");

      // Report.on will add an event handler which prints to Log window.
      report.on("loaded", function() {
        Log.logText("Loaded");
      });

      report.on("error", function(event) {
        Log.log(event.detail);

        report.off("error");
      });

      report.off("saved");
      report.on("saved", function(event) {
        Log.log(event.detail);
        if (event.detail.saveAs) {
          Log.logText('In order to interact with the new report, create a new token and load the new report');
        }
      });
    });
  </script>
</body>
</html>

Answer 1

希望这会有所帮助!!

＆＃13;

new Vue({
  el: "#app",
  data(){
    return{
    testimonialData: [
      {
        name: 'W',
        comments: 'It was great.',
        stars: 5
      },
      {
        name: 'Tom',
        comments: 'Easy to use.',
        stars: 4
      },
      {
        name: 'Has',
        comments: 'Test',
        stars: 3
      }
    ],
    counter: 0
  }
  },
  methods:{
		increment(){
			if((this.testimonialData.length - 1) === this.counter) {
				this.counter = 0;
			}
			else {
			 this.counter++;
			}
		}
  },
})

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <h3>{{testimonialData[counter].comments}}</h3>
  <hr>
  <button @click="increment">Increment</button>
</div>

＆＃13;

Answer 2

看看这个。

new Vue({
  el: "#app",
  data() {
    return {
      testimonialData: [{
          name: 'W',
          comments: 'It was great.',
          stars: 5
        },
        {
          name: 'Tom',
          comments: 'Easy to use.',
          stars: 4
        },
        {
          name: 'Has',
          comments: 'Test',
          stars: 3
        }
      ],
      counter: 0
    }
  },
  methods: {
    increment() {
      //for generic if(this.counter === this.testimonialData.length - 1)
      if (this.counter == 2)
        this.counter = 0;
      else
        this.counter++;

    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <button class="next" @click="increment"> > </button>
  <h3>{{testimonialData[counter].name}}</h3>
  <h4>"{{testimonialData[counter].comments}}" with
    <span>{{testimonialData[counter].stars}} star/s.</span>
  </h4>
</div>

Vuejs：我需要在第三次按下按钮后将按钮重置回名字

2 个答案: