How to get ModelAndView object coming from Spring into Vue data?

Question

I have one controller class:

@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;
        }
    }

and then I am trying to get in my getitems.html page as:

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

I see that with Thymeleaf is works as th:object="auctionItems". How about Vue in this case? Or How shall I mark thymeleaf object to vue data?

Any other suggestions would also be appreciated. My main objective is to use Vue on the front end page.

Catalin Pirvu · Answer 1 · 2020-04-25T23:17:17.260

2

If I understand correctly, in getitems.html you inserted a <script> that contains this code <%= ${auctionItems} %> that should be executed.

This is wrong as the <% %> code is executed on server-side, in a servlet, then the result is returned to the user and you actually try to execute that on client side in a script tag. It can't possibly work.

If you want that the auctionItems reach the javascript, then you should add it as a data attribute to an html div and retrieve it from js. I'll sketch this down:

// 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');

This is not the best approach, but looks very close to what you tried to do.

A better approach would be to not store the auctionItems into the html itself and only make a GetRequest in js when you want the data from the backend, like so:

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

And your controller should return a response containing the data, not storing it into the Model.

edited Apr 25 '20 at 23:17

answered Apr 25 '20 at 23:11

Catalin Pirvu

175
2
8

Thanks for this. But I saw in ruby on rails that you can directly assign the object coming from controller to Vue data variable: `` I want to assign vue data variables similarly and work on the current page. I don't want to keep another call to controller on the same page. – Pradeep Kumar Apr 26 '20 at 08:21
I am a bit confused and if you can point to where you got this from maybe it can help. What I wanted to show you is a better approach (that will definitely won't call the controller multiple times). I will point again the fact that `<% %>` can't be executed in `` tags. Check your console log and you'll probably have a typo issue. – Catalin Pirvu Apr 26 '20 at 14:38
Hey Catalin, Thanks. I figured out. – Pradeep Kumar May 10 '20 at 14:58
@CatalinPirvu, why wouldn't `<% %>` be executed in script tags? they will be executed on the server side and result printed in the html source, and then be available for script ptocessing? – eis May 10 '20 at 15:01

score 0 · Answer 2 · answered May 10 '20 at 14:58

0

This is how to do it.

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

answered May 10 '20 at 14:58

Pradeep Kumar

31
1
3

How to get ModelAndView object coming from Spring into Vue data?

2 Answers2