https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • r
    Vue relies on virtual DOM that must be in sync with page DOM
  • g
    it's easier to embed spa components in htmx fragments than the other way around
  • r
    htmx will break this parity and, as a result, vue will most likely behave unpredictably
  • r
    but what do you advise me to do?
  • g
    you could watch the array you're looping over and call htmx.processNode when it changes
  • r
    Sorry, I didn't quite understand
  • r
    Can I show you my code?
  • r
    Copy code
    html

     <tr v-for="post in HubriseOrder" onclick="myFunction()" class="btnSelect tr-commande contenttableforpopup" hx-post="'{{ request.path }}?id=' + post.id" hx-target=".modal-body">
          <td data-label="NĀ° de commande" >[[ post.id_order]]</td>
          <td data-label="Type de service">[[post.service_type]]</td>
          <td data-label="Prix">[[post.status]]</td>
      </tr>
  • g
    are you using composition API or options API?
  • r
    from htmx ?
  • g
    from vue
  • g
  • r
    not that I know of, I just imported the script to run vue.Js
  • g
    can you show where 
    HubriseOrder
    is declared?
  • r
    I'm not expert in vue.js I just use it for a websocket
  • r
    Copy code
    js
      <script>
      vueApp = new Vue({
        el: "#app",
        delimiters: ["[[", "]]"],
        data() {
          return {
            HubriseOrder: [],
          };
        },
      });

      var ws = new WebSocket("ws://localhost:8000/ws/");

      ws.onopen = function (e) {
        ws.send(
          JSON.stringify({
            action: "list",
            request_id: new Date().getTime(),
          })
        );
      };

      ws.onmessage = function (e) {
        allData = JSON.parse(e.data);
        if (allData.action === "list") {
          vueApp.$data.HubriseOrder = allData.data;
          vueApp.$forceUpdate();
        } else if (allData.action === "create") {
          vueApp.$data.HubriseOrder.push(allData.data);
        }
      };
    </script>
  • g
    ok, this is options api
  • r
    yes šŸ˜…
  • g
    Copy code
    js
vueApp = new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data() {
    return {
      HubriseOrder: [],
    };
  },
  watch: {
    HubriseOrder(newOrder, oldOrder) {
      htmx.processNode(this.$refs.table);
    }
});
  • g
    and add 
    ref=table
    to your table
  • r
    I'm out on an important errand, as soon as I get home I'll test it, thanks a lot!
  • r
    I have modified with your code but it does not work error
    Copy code
    Uncaught SyntaxError: Unexpected token ')' (at commande:227:18)
  • r
    ah it misses
    Copy code
    }
  • r
    i have this error
    Copy code
    ReferenceError: htmx is not defined
    at Cn.HubriseOrder (commande:225:23)
    at Be (vue@2.6.14:6:11394)
    at pn.run (vue@2.6.14:6:27888)
    at ln (vue@2.6.14:6:25859)
    at Array.<anonymous> (vue@2.6.14:6:12476)
    at We (vue@2.6.14:6:11877)
  • r
    I don't see where to define it @gorgeous-airport-54386
  • g
    how did you import htmx?
  • g
    you need that to be before your vue code
  • r
    ok I fixed it but now I have this new error```htmx.processNode is not a function```
  • r
    yet I have well defined htmx @gorgeous-airport-54386
  • g
    sorry, it's just 
    process
1...890891892...1146Latest