0

I want each question that entered by the user to be turned to a link that leads to a page to discuss and comments on this question solely. So, I have a text area that takes user input (a question ) then save it to a localstorge with previous hardcoded data. The hardcoded data are rendered properly to valid links to dynamic pages. But those from user input are not working. I checked many questions here I did not find a proper answer to this problem. I want the input of user to work as a link . They all stored together and I am looping them together , so I expect them all to be working as links properly. But those from user do not work as expected:

<table v-for="q in questions">
  <td>
    <tr class="border-dotted border-2 border-light-blue-200">
       <nuxt-link :to="`/questions/${q.id}`"> {{ q.question }}</nuxt-link>   
    </tr>
  </td>
</table>

Computed property to read from vuex:

computed: {
  questions() {
    return this.$store.state.all;
  } 
}

Any help?

First 6 questions are hardcoded and they work. The last one is from user and it is not working

The data from user is stored properly within the hardcoded data but not works as them

This link is working . It is hardcoded. I expect similar results from data coming from users

This link from user is not working

Console TypeError of undefined

sami alghamdi
  • 3
  • 4
  • You have errors in your console most likely. Please check there. – Ohgodwhy May 12 '21 at 10:39
  • Thank you. Yes, I got TypeError of undefined. I updated my question and added a screenshot of this error above. – sami alghamdi May 12 '21 at 11:05
  • I totally did not get what you're trying to achieve here. On top of that, there is an error on some place that is not even given. A [repro] could be nice, on top of clearer instructions. – kissu May 12 '21 at 13:24
  • Thanks for editing. What I am trying achieve is: getting a question from the user. When the user submits a question, it shows a link that leads to a page that allows discussion of this question. I could achieve this for hardcoded data, but it did not works when the question is coming from the user via text area. I mean, the links not working. I have edited my question to show that and clarify my intention. – sami alghamdi May 12 '21 at 14:35
  • Do you intend to make something like a forum where you can post a question and let other people see/answer to it? Like a competitor to StackOverflow ?! :O Jokes aside, you will require a backend for this, to let the whole thing persist and generate UUID in the url like `https://mywebsite.io/questions/lskd1831` that you could then access by fetching all the written content persisted into a database. – kissu May 12 '21 at 14:50
  • In fact, yes it is a prototype for something like StackOverflow but for a very small scale. So I understand that this functionality cannot be done without backend and DB? – sami alghamdi May 12 '21 at 15:01

1 Answers1

0

As stated in the comments, if you want to have something looking like StackOverflow, with various created pages and question + answers, you'll need persisted data.
Vue is client only and therefore, if you have a created question, it'll stay on your own machine (other people will not see it).

So yeah, a backend with a database is required here.

If it's a small project, you could even maybe use an online service like Firebase to have a mongo-like quick and simple DB. Or any other cheap/free service. If you want to go more serious, you'll need to make your own backend. :)

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Thanks, but for just prototyping purposes, cannot I just make these links works for a demo? I mean what technically prevent this from working on my local machine? I would be grateful for any sources on this. – sami alghamdi May 12 '21 at 15:10
  • If you want to have it for a demo on your machine (only), you can achieve it too. You'll need to have a form with various text inputs, once you submit it, you could push the data into an array and generate a URL, and pass the payload to the details page. Here is an example on how to have a list + details pages with data fetched from an API: https://stackoverflow.com/a/67490633/8816585 In your case, rather than fetching it, you could generate it locally but achieve pretty much the exact same behavior. – kissu May 12 '21 at 15:14