0

我有一个控制器类：

@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 怎么样？或者我应该如何将 thymeleaf 对象标记为 vue 数据？

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

4

2 回答 2

2

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

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

如果您希望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');

这不是最好的方法，但看起来非常接近您尝试做的事情。

更好的方法是不将拍卖项目存储到 html 本身中，仅当您需要来自后端的数据时才在 js 中创建 GetRequest，如下所示：

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

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

于 2020-04-25T23:11:27.767 回答
0

这是如何做到的。

data: {
      auctionItem: [(${auctionItem})],
      userBidValue: null
     }
于 2020-05-10T14:58:15.560 回答