更新JavaScript中Alpine.js的x-data在init函数中。

huangapple
go评论102阅读模式
英文:

Updating x-data with Alpine.js in JavaScript's init function

问题

  1. div class="mt-2" x-data="{ ShowReport: false }">
  2.     <button class="dui-btn dui-btn-neutral" x-on:click="ShowReport = !ShowReport">Show Report</button>
  3.     <div x-show="ShowReport">
  4.         <div class="p-4">
  5.             <div id="csv-response"></div>
  6.         </div>
  7.     </div>
  8. </div>
  10. <script>
  11.     document.addEventListener("DOMContentLoaded", () => {
  12.         const csvUploadDropzone = new common.Dropzone("#csv-upload-dropzone", {
  13.             dictDefaultMessage: "Drag and drop your csv here",
  14.             url: "{% url 'buyer:csv-upload' buyer.id %}",
  15.             acceptedFiles: '.csv',
  16.             uploadMultiple: false,
  17.             autoProcessQueue: true,
  18.             maxFiles: 1,
  19.             dictMaxFilesExceeded: "You may only upload a single csv document!",
  20.             maxFilesize: 10,
  21.             addRemoveLinks: true,
  22.             dictRemoveFile: "Remove",
  24.             init: function () {
  25.                 this.on("success", function (file, response) {
  26.                     document.getElementById('csv_filename').value = response['csv_filename'];
  27.                     document.getElementById("csv-response").innerHTML = response;
  28.                     this.ShowReport = true;
  29.                 });
  30.             },
  32.             removedfile: function(file) {
  33.                 document.getElementById('csv_filename').value = null;
  35.                 if (file.previewElement != null && file.previewElement.parentNode != null) {
  36.                     file.previewElement.parentNode.removeChild(file.previewElement);
  37.                 }
  38.                 return this._updateMaxFilesReachedClass();
  39.             },
  41.             maxfilesexceeded: function(file) {
  42.                 alert("You may only upload a single csv document!");
  43.                 this.removeFile(file);
  44.             },
  46.         });
  47.     });
  48. </script>
英文:

Alpine.js: How do we update an x-data="{ ShowReport: false }" in an init function of Javascript?

I'm trying to open a &lt;div&gt; once a file already executed(which is now good) but the ShowReport didn't change to "true"

Trying to update the ShowReport to "true" Please see the attached code:

  1. div class=&quot;mt-2&quot; x-data=&quot;{ ShowReport: false }&quot;&gt;
  2.             &lt;button class=&quot;dui-btn dui-btn-neutral&quot; x-on:click=&quot;ShowReport = ! ShowReport&quot;&gt;Show Report&lt;/button&gt;
  3.             &lt;div x-show=&quot;ShowReport&quot;&gt;
  4.                 &lt;div class=&quot;p-4&quot;&gt;
  5.                     &lt;div id=&quot;csv-response&quot;&gt;&lt;/div&gt;
  6.                 &lt;/div&gt;
  7.             &lt;/div&gt;
  8.         &lt;/div&gt;
  10.  &lt;script&gt;
  11.         document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  12.             const csvUploadDropzone = new common.Dropzone(&quot;#csv-upload-dropzone&quot;, {
  13.                 dictDefaultMessage: &quot;Drag and drop your csv here&quot;,
  14.                 url: &quot;{% url &#39;buyer:csv-upload&#39; buyer.id %}&quot;,
  15.                 acceptedFiles: &#39;.csv&#39;,
  16.                 uploadMultiple: false, // POST a single document at a time (on server URL ``url``)
  17.                 autoProcessQueue: true, // true will trigger automatic uploading/processing of the dropped resume
  18.                 maxFiles: 1, // a maximum of a single CV
  19.                 dictMaxFilesExceeded: &quot;You may only upload a single csv document!&quot;,
  20.                 maxFilesize: 10, // in MB
  21.                 addRemoveLinks: true,
  22.                 dictRemoveFile: &quot;Remove&quot;,
  24.                 init: function () {
  25.                     this.on(&quot;success&quot;, function (file, response) {
  26.                         // Updates the &quot;hidden&quot; csv with whatever the server sent back to us...
  27.                         document.getElementById(&#39;csv_filename&#39;).value = response[&#39;csv_filename&#39;];
  28.                         document.getElementById(&quot;csv-response&quot;).innerHTML = response;
  29.                         this.ShowReport = true
  30.                     });
  31.                 },
  33.                 //success: function(file, response) {
  34.                     // Updates the &quot;hidden&quot; csv with whatever the server sent back to us...
  35.                     //document.getElementById(&#39;csv_filename&#39;).value = response[&#39;request_file&#39;];
  36.                     //console.log(file)
  37.                 //},
  39.                 removedfile: function(file) {
  40.                     // Update our hidden filename; then call the &quot;default&quot; behaviour as per docs...
  41.                     document.getElementById(&#39;csv_filename&#39;).value = null;
  43.                     if (file.previewElement != null &amp;&amp; file.previewElement.parentNode != null) {
  44.                         file.previewElement.parentNode.removeChild(file.previewElement);
  45.                     }
  46.                     return this._updateMaxFilesReachedClass();
  47.                 },
  49.                 maxfilesexceeded: function(file) {
  50.                     alert(&quot;You may only upload a single csv document!&quot;);
  51.                     this.removeFile(file);
  52.                 },
  54.             });
  55.         });
  56.         
  57.     &lt;/script&gt;

答案1

得分: 1

你可以考虑使用 a store 如下：

  1. &lt;div class=&quot;mt-2&quot; x-data&gt;
  2.   &lt;button
  3.     class=&quot;dui-btn dui-btn-neutral&quot;
  4.     x-on:click=&quot;$store.myStore.toggle()&quot;
  5.   &gt;
  6.     Show Report
  7.   &lt;/button&gt;
  8.   &lt;div x-show=&quot;$store.myStore.showReport&quot;&gt;
  9.     &lt;div class=&quot;p-4&quot;&gt;
  10.       &lt;div id=&quot;csv-response&quot;&gt;&lt;/div&gt;
  1. Alpine.store(&#39;myStore&#39;, {
  2.     showReport: false,
  3.     toggle() {
  4.         this.showReport = !this.showReport;
  5.     },
  6. });
  8. document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  9.   // …
  10.   init: function () {
  11.     this.on(&quot;success&quot;, function (file, response) {
  12.       // …
  13.       Alpine.store(&#39;myStore&#39;).showReport = true;
  14.     });
  15.   },
  16.   // …
  17. });

或者你可以在脚本中定义 data 如下：

  1. &lt;div class=&quot;mt-2&quot; x-data=&quot;myData&quot;&gt;
  1. Alpine.data(&#39;myData&#39;, {
  2.   ShowReport: false,
  3.   init() {
  4.     const myData = this;
  5.     document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  6.       // …
  7.       init: function () {
  8.         this.on(&quot;success&quot;, function (file, response) {
  9.           // …
  10.           myData.ShowReport = true;
  11.         });
  12.       },
  13.       // …
  14.     });
  15.   },
  16. });
英文:

You could consider using a store like:

  1. &lt;div class=&quot;mt-2&quot; x-data&gt;
  2.   &lt;button
  3.     class=&quot;dui-btn dui-btn-neutral&quot;
  4.     x-on:click=&quot;$store.myStore.toggle()&quot;
  5.   &gt;
  6.     Show Report
  7.   &lt;/button&gt;
  8.   &lt;div x-show=&quot;$store.myStore.showReport&quot;&gt;
  9.     &lt;div class=&quot;p-4&quot;&gt;
  10.       &lt;div id=&quot;csv-response&quot;&gt;&lt;/div&gt;
  1. Alpine.store(&#39;myStore&#39;, {
  2.     showReport: false,
  3.     toggle() {
  4.         this.showReport = !this.showReport;
  5.     },
  6. });
  8. document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  9.   // …
  10.   init: function () {
  11.     this.on(&quot;success&quot;, function (file, response) {
  12.       // …
  13.       Alpine.store(&#39;myStore&#39;).showReport = true;
  14.     });
  15.   },
  16.   // …
  17. });

Or you could define the data in the script:

  1. &lt;div class=&quot;mt-2&quot; x-data=&quot;myData&quot;&gt;
  1. Alpine.data(&#39;myData&#39;, {
  2.   ShowReport: false,
  3.   init() {
  4.     const myData = this;
  5.     document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  6.       // …
  7.       init: function () {
  8.         this.on(&quot;success&quot;, function (file, response) {
  9.           // …
  10.           myData.ShowReport = true;
  11.         });
  12.       },
  13.       // …
  14.     });
  15.   },
  16. });
  18. </details>

huangapple
  • 本文由 发表于 2023年5月21日 08:27:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/76297836.html
  • alpine.js
  • javascript
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定