Home>
Currently writing HTML and using vue.js.

I am writing html using vue.js for studying.

I'm trying to run Shuffle.js after taking data with vue.js, but it doesn't work.

Shuffle.js The current version didn't work, so use the old version We are

In vue.js, it takes the value, but
To run Shuffle.js,
HTML second line

<li groups = '["other", "all"]'>


I want you to get the value like this,

<li groups = "[" other "," all "]">


I got the data by double quotes
Shuffle.js does not work well.

Change the notation of mein.js

<li groups = "['othe', 'all']">

Shuffle.js did not work.

(Same code when writing solid)

"['othe', 'all']" NG
'["other", "all"]' OK

Is it possible to get as above?

For newbies
vue.js
Shuffle.js
I tried to read the file and change it to single coat,
It was difficult to understand and change.

Thanks for your professor.

Applicable source code

        <li v-bind: groups = "list.group">
            
          <p>{{list.title}}</p>
<P>{{list.main}}</p>
          <p>{{list.date}}</p>
        </li>
      
  <script src = "https://cdn.jsdelivr.net/npm/vue"></script>
  <script src = "js/main.js"></script>
new Vue ({
    el: '#list',
    data: {
        datalists: [
          {
            "group": '["other", "all"]',
            imgStatic: ("../static/XXX.jpg"),
            "title": "title",
            "main": "Main",
            "date": "date"
          },
 {
            "group": '["other", "all"]',
            imgStatic: ("../static/XXX.jpg"),
            "title": "title",
            "main": "Main",
            "date": "date"
          },
        ],
      }
  });
  • Answer # 1

      

    I'm trying to run Shuffle.js after taking data with vue.js, but it doesn't work.

    In the first place, Vus.js and JavaScript that directly rewrites the DOM outside the framework of Vue.js are usuallyincompatible.

    I think it's appropriate to try something like https://git.hrzg.de/dmstr/vue-shufflejs-plugin or give up either Vue.js or Shuffle.js The

  • Answer # 2

      


      I got the data with double quotes

    What was the reason for that?
    It looks like it's moving normally ...

    
      
        

             

    {{list.title}}

        

    {{list.main}}

        

    {{list.date}}

        

      
      

    In order to run another JS process, I want to get it in the form of '["other", "all"]'
      We heard from you, but you are drunk with "[" other "," all "]".
      For example, I will receive it in another js

    
      
        

             

    {{list.title}}

        

    {{list.main}}

        

    {{list.date}}

        

      


    It seems to have been escaped when received in the array, but this is
    Development tool display issues
    If you take an element, you can determine that the specified one has been inserted