Question

我有一个控制器类：

@RestController
public class ItemController {

    @Autowired
    private ItemService itemService;


    @GetMapping("/auction_items")
    public ModelAndView getAllItems() {
            ModelAndView mv = new ModelAndView();
            List<Item> itemList = itemService.getAllItems();
            mv.addObject("auctionItems", itemList );
            mv.setViewName("auction_items");
            return mv;
        }
    }

然后我尝试以以下方式进入我的getitems.html页面：

<script>
  var app = new Vue({
    el: '#app',
    data: {
      auctionItems: <%= ${auctionItems} %>
    }
  })
</script>

我看到Thymeleaf可以作为th：object =“ auctionItems”使用。在这种情况下Vue怎么样？或如何将百里香叶对象标记为vue数据？

任何其他建议也将不胜感激。我的主要目标是在前端页面上使用Vue。

Answer 1

如果我的理解正确，您在getitems.html中插入了一个<script>，其中包含应执行的代码<%= ${auctionItems} %>。

这是错误的，因为<% %>代码是在服务器端的servlet中执行的，然后将结果返回给用户，而您实际上尝试在客户端的script标记中执行该代码。它可能无法工作。

如果您希望auctionItems访问javascript，则应将其作为数据属性添加到html div并从js检索它。我将其概述如下：

// in your html
<div id="dataDiv" data-auctions="#{auctionItems}"></div>

//in your js - of course, you can change it to use jQuery if you want
var auctions = document.getElementById("dataDiv").getAttribute('data-auctions');

这不是最佳方法，但看起来非常接近您尝试执行的操作。

一种更好的方法是不将AuctionItems存储到html本身，而仅在需要后端数据时才在js中进行GetRequest，例如：

$.get('/auction_items', function (data, textStatus) {  
    alert('status: ' + textStatus + ', data:' + data);
});

并且您的控制器应返回包含数据的响应，而不是将其存储到模型中。

Answer 2

这是方法。

data: {
      auctionItem: [(${auctionItem})],
      userBidValue: null
     }

如何将来自Spring的ModelAndView对象转换为Vue数据？

2 个答案: