質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

582閲覧

vue.jsで計算した値がjsのclassに入らない

yoyoyoyogi

総合スコア47

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/08/15 14:13

編集2020/08/17 23:04

ユーザが選んだ複数のサービスの合算納期から発送日を求めるコードが作りたいのですが。

jsの営業日計算をするスクリプトを頂きまして、そこにvue.jsで計算した合計日数の値を放り込んで営業日計算をしたいのですが、どうもうまく行きません。

初期値を設定すると動くので基本的には動いているみたいなのですが、vue.jsのcomputedで合算した値を代入すると動きません。

頂いたjsコード・営業日で納期計算するコード

javascript

1 2var duedate = { 3 Week: [1,0,0,0,0,0,1], // 曜日による休み 日月火水木金土の順、1にすると休み 4 Day: { // 日付による休み 5 '1/1': true, // 毎年の場合は年は不要 6 '1/2': true, 7 '1/3': true, 8 '2016/10/21': true, 9 '2016/10/22': true, 10 '2020/09/21': true, 11 12 }, 13 After: 17, // 18時以降は翌日扱いにする場合などの時間 1~23 14 WeekLabel: ['日','月','火','水','木','金','土'], 15 Date: new Date(), 16 $: function(obj){ 17 if(typeof obj == 'string'){ 18 if(document.getElementById(obj)){ 19 return document.getElementById(obj); 20 } 21 else { 22 return null; 23 }; 24 } 25 else { 26 return obj; 27 }; 28 }, 29 initialize: function(){ 30 var _ = duedate; 31 _.ready(function(){ 32 var ajust = 0; 33 if(_.After && _.Date.getHours() >= _.After){ 34 ajust = 1; 35 }; 36 var objects = _.byClassName(document,'duedate'); 37 for(var i=0;i<objects.length;i++){ 38 var date = parseInt(objects[i].getAttribute('data-date')) + ajust; 39 var text = objects[i].getAttribute('data-text') || 'YYYY/MM/DD'; 40 var ii = 0; 41 var current = null; 42 var y,m,d,w,s; 43 while(date >= 0){ 44 current = new Date(_.Date.getTime() + (60*60*24*1000*ii)); 45 y = current.getFullYear(); 46 m = current.getMonth() + 1; 47 d = current.getDate(); 48 w = current.getDay(); 49 s1 = y+'/'+m+'/'+d; 50 s2 = m+'/'+d; 51 if(!_.Week[w] && !_.Day[s1] && !_.Day[s2]){ 52 date--; 53 }; 54 ii++; 55 }; 56 objects[i].innerHTML = _.format(text,y,m,d,w); 57 }; 58 }); 59 }, 60 format: function(t,y,m,d,w){ 61 var _ = duedate; 62 t = t.replace('YYYY',y); 63 t = t.replace('MM',m); 64 t = t.replace('DD',d); 65 t = t.replace('W',_.WeekLabel[w]); 66 return t; 67 }, 68 byClassName: function(parentNode,className){ 69 var _ = duedate; 70 try { 71 return parentNode.getElementsByClassName(className); 72 } 73 catch(e){ 74 var classNames = []; 75 var elements = parentNode.getElementsByTagName('*'); 76 for(var i=0;i<elements.length;i++){ 77 if(_.className(elements[i],className)){ 78 classNames.push(elements[i]); 79 }; 80 }; 81 return classNames; 82 }; 83 }, 84 className: function(obj,name,reg){ 85 var _ = duedate; 86 var classNames = new Array(); 87 classNames = obj.className.split(' '); 88 if(!reg){ 89 var className = new Object(); 90 for(var i=0;i<classNames.length;i++){ 91 className[classNames[i]] = true; 92 }; 93 if(name){ 94 return className[name]; 95 } 96 else { 97 return className; 98 }; 99 } 100 else { 101 var className = null; 102 for(var i=0;i<classNames.length;i++){ 103 if(classNames[i].match(reg)){ 104 return classNames[i]; 105 }; 106 }; 107 return className; 108 }; 109 }, 110 addEvent: function(elm,listener,fn){ 111 try { 112 elm.addEventListener(listener,fn,false); 113 } 114 catch(e){ 115 elm.attachEvent('on'+listener,fn); 116 }; 117 }, 118 ready: function(fn){ 119 if(document.addEventListener){ 120 document.addEventListener("DOMContentLoaded",fn,false); 121 } 122 else { 123 var IEReady = function(){ 124 try { 125 document.documentElement.doScroll("left"); 126 } 127 catch(e) { 128 setTimeout(IEReady,1); 129 return; 130 }; 131 fn(); 132 }; 133 IEReady(); 134 }; 135 } 136}; 137duedate.initialize(); 138コード

上記コードを利用している自分で書いたvue.jsのコード

vue.js

1<p>発送予定:<span class="duedate" :data-date="nouki_total" data-text="YYYY年MM月DD日(W)"></span</p> 2 3 4var ps = new Vue({ 5 el: '#flyer-price', 6 data: { 7 nouki1:'', 8 nouki2:'' 9 10 }, 11 computed:{ 12 13 14 nouki_total: function () { 15 total_nouki = nouki1+nouki2; 16 return total_nouki; 17 },

nouki1とnouki2はinput要素からv-modelで取得して、total_nouki自体には間違い無く取得出来ておりました。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dameo

2020/08/17 22:16

2つコードが貼られていますが、部分的である上に相互に関連している部分がありません。 これを見て何かを判断するのは困難だと思いますよ。 一言で言えば、載せられてない部分で動いてるのかもしれないが、ココが該当部分だとすると「動くはずがない」という感じです。
yoyoyoyogi

2020/08/17 23:03

わかりにくい様ですいません。 あ、更に間違っていた様です、すいません。 <p>発送予定:<span class="duedate" :data-date="nouki_total" data-text="YYYY年MM月DD日(W)"></span</p> のclassでjs側がdata-dateの値、nouki_totalを読み込むんでいます。 nouki_total、はvue.jsのcomputedで nouki_tota: function () { total_nouki = nouki1+nouki2 return total_nouki; }, nouki1とnouki2はinputからユーザーの選択を持ってきています。
dameo

2020/08/17 23:05

分かりにくいどころではないのですよ。全く論外レベルなのです。
guest

回答1

0

ベストアンサー

色々考えたのですが、もしかしてりアクティブに変更した納期を通常のjsの式に放り込んでも再読み込みしてくれて無い、という事では!?

タイミングによります。
できれば全部Vueに載せるべきor VueやめてjQueryで頑張るところかと思います。
どうしてもやりたいという場合は
例えば・・・setIntervalでvue側のデータを逐次ウォッチする
またはVueのウォッチで変更を掴む事ができます。

ただ、やはりVueとそうじゃないところのハイブリッドは調べても出てこず、経験で賄う事が多いと思いますので
できれば正攻法で行うのが良いかと思います。

投稿2020/08/15 14:19

mikkame

総合スコア5036

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoyoyoyogi

2020/08/16 00:20 編集

ありがとうございます。 変更されたらもう一度jsのduedateを実行させる、という事かと思ってvueのwathでtotale_noukiの変更をウォッチしてみたんですが、変更は感知出来るんですがduedateをもう一度実行ってどうするんだ?と、その後どうしたら良いか途方にくれました。 悩んでおります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問