小编Sve*_*edr的帖子

我现在已经坚持这个问题2个小时了,我似乎无法让它发挥作用.

const app = new Vue({
  el: '#book-search',
  data: {
    searchInput: 'a',
    books: {},
  },
  methods: {
    foo: function () {
      axios.get('https://www.googleapis.com/books/v1/volumes', {
        params: {
          q: this.searchInput
        }
      })
      .then(function (response) {
        var items = response.data.items
        for (i = 0; i < items.length; i++) {

          var item = items[i].volumeInfo;

          Vue.set(this.books[i], 'title', item.title);   

        }
      })
      .catch(function (error) {
        console.log(error);
      });

    }
  }
});

当我启动搜索和API调用时,我希望将值传递给数据,因此最终结构看起来类似于下面的结构.

data: {
  searchInput: '',
  books: {
    "0": {
       title: "Book 1"
     },
    "1": {
       title: "Book 2" …

我试图在标签之前放置一个响应式css广场.像这样的东西

我一直试图这样做,但我似乎无法让广场出现.你能帮我解决这个问题.

h1::before {
position: relative;
width: 25%;
padding-bottom: 25%;
overflow: hidden;
background: red;
}

谢谢您的回答!

这是一个简单的问题,我编写了一个简单的计算函数,虽然我遇到了一个问题但它工作得很好,因为它只适用于.change()方法,而不是在加载文档时.我编写的这个函数依赖于页脚中包含的Numerals库.

$(document).ready(function() {

  function compute() {
  var row = $(this).closest('tr');

  var price = parseFloat($('.price', row).val().replace(',', '.'));

  var quantity = parseFloat($('.quantity', row).val(), 10);
  var total = price * quantity;
  totalCleaned = numeral(total.toFixed(2)).format('0,0.00');
  $('.total', row).html(totalCleaned);

  var grandTotal = 0;
  var totalsum = 0;
  $('.total').each(function() {
      totalsum += numeral().unformat($(this).text());
      grandTotal = numeral(totalsum.toFixed(2)).format('0,0.00'); 
      $('.net-total').html(grandTotal);
  });

  console.log(grandTotal);

}

compute(); // this is where I am trying to start the function on load
$('.price, .quantity').change(compute);


});