CODEWITHSUNDEEP
javascriptvue.jswebrtcvuejs3simplewebrtc
Fayakon
Fayakon

Reputation: 1523

vuejs get text values across browser

i have text box if i type something it's showing text value based on it's id, my code is working when i run it on laptop http://localhost:8080/

if i open same website my on phone http://xxx.xxx.x.xxx:8080/ it's showing same page.

when i type text box id on phone and i try to view value which is on laptop, it's not showing that value.

enter image description here

template:

<input id="1" type="text" placeholder="i am id1, show my value" />

  <input id="2" type="text" placeholder="i am id2, show my value" />

  <input v-model="searchidinput" type="text" placeholder="which ids data you want, 1 or 2 " />

  <button @click="getvalue">RECEIVE</button>

  <div>show value of id {{ searchid ? searchid : "<none>" }} here: 
{{ value ? value : "none selected"}}
    
  </div>
</template>

VUEJS:

    <script>
import { defineComponent,ref } from 'vue'
export default defineComponent({
  setup() {
     const value = ref("");

    const searchid = ref("");
    const searchidinput = ref("");

function getvalue() {
this.value=null
      this.searchid = this.searchidinput
      const el = document.getElementById(this.searchid);
      if (el) {
        this.value = el.value
        console.log(value);
      }
    }

    return {
      value,
      searchid,
      getvalue,
      searchidinput,
    };
}
})
</script>

How can i transfer text values without database across browser on same domain/website.

Upvotes: 1

Views: 157

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29169

You will either need a backend server to sync the data from a hub, or will need to use WebRTC technology for peer-to-peer interaction.

Here is a link to a project that should fit the bill.

https://docs.yjs.dev/

Upvotes: 1

Related Questions