htmlでvue.js使用し、jsに書いたデータを取得する際、返り値の(”)を(’)で返したい。

Question

現在HTMLを書いておりvue.jsを使っています。

勉強のためvue.jsを使ってhtmlを書いております。

vue.jsでデータを取った後、Shuffle.jsの処理を走れせようと思っていますがうまくいきません。

Shuffle.js現行バージョンは動かなかったため古いバージョンを使っております。

vue.jsでは値を取ってこれてはいるのですが、
Shuffle.jsを走らせるために、
HTML２行目に

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

このように値を取得してきてほしいのですが、

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

でダブルコーテーションでデータをとってきてしまい
Shuffle.jsの処理が上手く動きません。

またmein.jsの表記を変えて

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

のように値を取得はしたところ

Shuffle.jsが動きませんでした。

（ベタでコード書いてみても同じ）

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

上記のように取得することは可能でしょうか？

まだ初心者のため
vue.js
Shuffle.js
のファイルを読み解きシングルコートに変えようとしましたが、
なかなか理解できず変更できませんでした。

いい方法ございましらご教授お願いいたします。

該当のソースコード

　　　<div v-for="list in datalists">
        <li v-bind:groups="list.group">
            <img class="img" :src="list.imgStatic">
          <p>{{ list.title }}</p>
　　　　　　<p>{{ list.main }}</p>
          <p>{{ list.date}}</p>
        </li>
      </div>
  <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": "タイトル",
            "main": "メイン",
            "date": "日付"
          },
 　　　　　 {
            "group": '["other","all"]',
            imgStatic: ("../static/XXX.jpg"),
            "title": "タイトル",
            "main": "メイン",
            "date": "日付"
          },
        ],
      }
  });

Comments

[maisumakun]

「HTMLが（中略）返ってきてほしい」とありますが、「何らかのサーバサイドがあってHTML自体を変化させて返す」のでしょうか、それとも「Vue.jsの結果」でしょうか。

[miyabi_pudding]

datalists内の、各プロパティの"を取ったらどうなりますか？
それで直りませんか？
また、maisumakunさんが聞いてるサーバーサイドからHTMLを変化させる場合、特にJSON取得の場合は、プロパティ名を"で囲うという仕様のため、なんらかの処理を挟まないと、"がどうしても付いてしまうかと。

[pepe1122]

質問ありがとうございます。
各プロパティの"を取っても"["other","all"]"で戻ってきてしまいます。
まだ勉強中で、詳しく理解してないのですが、
現在bracketsでコードを書いて、ライブプレビューの機能を使いChromeで検証しています。
後々はレンタルサーバーなどあげて確認しようと思っております。

[miyabi_pudding]

すみません、勘違いしてました。
値の方ですね。
フレームワークは、要素の属性を定義するときに、"を優先的に使うようになっているので（設定で変えれるとは思う）値の方を変えた方がいいと思いますがどうでしょうか？
"['other','all']"
とするということです。

[pepe1122]

ありがとうございます。
値の”を変更するとvue.jsの処理は正常に動きデータが"['other','all']"のように取得できるのですが、
もう一つのJSが'["other","all"]'このような形でないと動かないような状態です。
やはりvue.jsかもう一つのjsファイルを読み解き、変更して処理を走らせるしかないのでしょうか？

[maisumakun]

「他の処理」はどのようなものなのでしょうか。

（値の表記法に関係なく、「そもそもVue.jsと相性が悪くうまく動かない」事も考えられます）

Answer 1

vue.jsでデータを取った後、Shuffle.jsの処理を走れせようと思っていますがうまくいきません。

そもそも論ですが、Vus.jsと、Vue.jsの枠組み外でDOMを直接書き換えるようなJavaScriptは、ふつうには両立できません。

https://git.hrzg.de/dmstr/vue-shufflejs-pluginのようなものを使ってみるか、それでだめならVue.jsとShuffle.jsのどちらかを諦めるのが適切かと思います。

Answer 2

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

でダブルコーテーションでデータをとってきてしまい

なにを根拠にそう判断されたのでしょうか？
見た感じ普通に動いていますが・・・

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="list">
  <div v-for="list in datalists">
    <li v-bind:groups="list.group">
    <img class="img" :src="list.imgStatic">
    <p>{{ list.title }}</p>
    <p>{{ list.main }}</p>
    <p>{{ list.date}}</p>
    </li>
  </div>
</div>
<script>
new Vue({
el: '#list',
data: {
datalists: [ 
  {
    "group": '["other","all"]',
    "imgStatic": ("../static/XXX.jpg"),
    "title": "タイトル",
    "main": "メイン",
    "date": "日付"
    },
  {
    "group": '["other","all"]',
    "imgStatic": ("../static/XXX.jpg"),
    "title": "タイトル",
    "main": "メイン",
    "date": "日付"
    },
  ],
}
});
</script>

別のJSの処理を走らせたいため、'["other","all"]'という形で取得したいと

とのご意見をいただきましたが、「["other","all"]」で、しゅつりょくされていますね。
たとえば別のjsでこう受け取ってみます

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="list">
  <div v-for="list in datalists">
    <li v-bind:groups="list.group">
    <img class="img" :src="list.imgStatic">
    <p>{{ list.title }}</p>
    <p>{{ list.main }}</p>
    <p>{{ list.date}}</p>
    </li>
  </div>
</div>
<input type="button" id="btn" value="btn">
<script>
new Vue({
el: '#list',
data: {
datalists: [ 
  {
    "group": '["other","all"]',
    "imgStatic": ("../static/XXX.jpg"),
    "title": "タイトル",
    "main": "メイン",
    "date": "日付"
    },
  {
    "group": '["other","all"]',
    "imgStatic": ("../static/XXX.jpg"),
    "title": "タイトル",
    "main": "メイン",
    "date": "日付"
    },
  ],
}
});
document.querySelector('#btn').addEventListener('click',function(){
  var x=Array.from(document.querySelectorAll('[groups]')).map(y=>y.getAttribute('groups'));
  console.log(x); //Array [ "[\"other\",\"all\"]", "[\"other\",\"all\"]" ]
  console.log(x[0]); // ["other","all"]
  console.log(x[0].length); //15
});
</script>

配列で受けるとたしかにエスケープされているようにも見えますがこれは
開発ツールの表示上の問題
要素をとれば指定したものが挿入されていることが判断できます

Comments

[pepe1122]

回答ありがとうございます。説明不足ですいません。
デベロッパーツールでの検証の値で判断しました。
vue.jsからは値は取得できておりますが、その後に
別のJSの処理を走らせたいため、'["other","all"]'という形で取得したいと思った所存です。

[yambejp]

別のJSから受け取った場合も追記しておきました
なにも問題ないと思います

[pepe1122]

ありがとうございます。確認いたしました。データ的には””の中だけ取得できているような形なのですね理解できました。知識不足で申し訳ないのですが、そのデータをシングルコートで出力するにはどうしたらいいか、ご教授していただいたりできないでしょうか？

[yambejp]

> そのデータをシングルコートで出力する

具体的にどう出力されればよいか明示してください

[pepe1122]

現在
groups=["other","all"]になっているので
groups='["other","all"]'にしたいと思っています。
+で'結合などもできるかなと思ったりしたのですが、上手くいかず...
質問ばかりでお時間取らせてすいません

[yambejp]

> groups=["other","all"]になっているので

なっていません
おそらくインスペクタ的なものをつかってみると
「groups="["other","all"]"」と見えることをさしているのでしょうけど
それは視覚的に表現している便宜的なものです
あなたがブラウザに気を使われているだけなのでそれ以上気にすることは無意味です

仮に
<div groups='["other","all"]'>aaa</div>
とだけ書いたhtmlをブラウザのインスペクタで見てみてください
<div groups="["other","all"]">aaa</div>
と「見た目上」書き換えられて表示されると思います